Question

在正常大小的计算机屏幕上，我在网格中有以下顺序：

{1}{2}
{3}{4}
{5}{6}

当我缩小屏幕时，我希望它重新排序，但是不能正确地重新排序。

实际：

{1}
{2}
{3}
{4}
{5}
{6}

想要：

{1}
{3}
{5}
{2}
{4}
{6}

我必须使用哪种CSS格式来实现想要显示的元素。

当前CSS：

.general {
  background-color: pink;
  order: 1;
}
.anonymous{
  background-color: aqua;
  order:4;
}
.dead{
  background-color: blue;
  order: 2;
}
.dead-and-archived {
  background-color: green;
  order:5;
}
.created {
  background-color: yellow;
  order:3;
}
.private {
  background-color: red;
  order:6;
}

当前HTML：

<div class="container-fluid">
  <div class="row">
    <div class="general col-sm-4" >
      General
    </div>
    <div class="anonymous col-md-8">
      Anonymous
    </div>
  </div>
  <div class="row">
    <div class=" dead col-md-4">
      Dead entities
    </div>
    <div class=" dead-and-archived col-md-8">
      Dead and archived
    </div>
  </div>
  <div class="row">
    <div class="created col-md-4 ">
      Created entities
    </div>
    <div class="private col-md-8">
      private user repos
    </div>
  </div>
</div>

Answer 1

您应该做的只是改变将内容放入div的方式。除非您的HTML是一成不变的，否则获得所需内容最明显的方法就是对HTML进行结构化，以便于实现所需的内容。

如果需要

{{1},{4}}
{{2},{5}}
{{3},{6}}

你不应该

{{1},{2}}
{{3},{4}}
{{5},{6}}

更改您的html，使其在结构层次上看起来像这样：

<div class="column">
    <div class="row">
        square 1
    </div>
    <div class="row">
        square 2
    </div>
    <div class="row">
        square 3
    </div>
</div>
<div class="column">
    ...
</div>

现在使用CSS为列指定宽度，以使它们彼此相邻，并且在使用移动设备时，将右侧的列放置在左侧的列下面。

执行此操作的另一种方法是添加适用于绝对定位的响应式CSS规则，但实际上，这只是完成所需内容的一种令人讨厌的方法。

Answer 2

我希望这会有所帮助： N.B.随时根据您的需要更改class值

<html>

<head>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container">
    <div class="col-xs-12 col-sm-6">
      <div class="col-xs-12">1</div>
      <div class="col-xs-12">3</div>
      <div class="col-xs-12">5</div>
    </div>

    <div class="col-xs-12 col-sm-6">
      <div class="col-xs-12">2</div>
      <div class="col-xs-12">4</div>
      <div class="col-xs-12">6</div>
    </div>

  </div>




</body>


</html>

在较小的屏幕上排列不同的顺序

2 个答案: