如何在移动响应式列布局中正确排序项目？答案

【问题标题】：How to correctly order items in mobile responsive column layout?如何在移动响应式列布局中正确排序项目？
【发布时间】：2018-11-13 19:23:03
【问题描述】：

我的 WordPress 网站在移动响应方面存在问题。我有多个具有以下排列的部分。

左侧内容和右侧图像（第一部分）
右侧图像和左侧内容（第二部分）

在移动版部分中以相同的排列方式（内容 -> 图像 | 图像 -> 内容）。

但我希望移动视图中的第二部分的安排应该完全相反。

图片 -> 内容 |图片 -> 内容

我想要在移动设备中这样的布局：

桌面版布局：

我该如何解决这个问题？

【问题讨论】：

标签： css wordpress media-queries

【解决方案1】：

您可以为这些 div 使用引导网格系统，也可以使用专门针对移动设备的媒体查询。

我猜网格系统会很简单。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-6">
      First columns
    </div>
    <div class="col-sm-6 col-md-6">
      Second columns
    </div>
    <div class="col-sm-6 col-md-6">
      Third columns
    </div>
    <div class="col-sm-6 col-md-6">
      Fourth columns
    </div>
</div>

【讨论】：

【解决方案2】：

您可以使用引导程序推拉的概念。请检查以下代码和输出或查看我的codepen。

.box {
  background: #fff000;
  margin: 10px 0;
  height: 200px;
  }

  
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 push-md-6"><div class="box">Image</div></div>
<div class="col-md-6 pull-md-6"><div class="box">Content</div></div>
<div class="col-md-6"><div class="box">Image</div></div>
<div class="col-md-6"><div class="box">Content</div></div>
</div>
</div>
</body>
</html>

【讨论】：