左列可能向右移动的响应式布局答案

【问题标题】：Responsive layout in which left column may move to the right左列可能向右移动的响应式布局
【发布时间】：2016-03-21 00:37:06
【问题描述】：

假设我们有这个包含 3 列的响应式设计（所有 3 列都是动态内容，所以我们不知道它们的高度）

对于桌面：

对于平板电脑（左栏向右移动）

我们实现这一目标的最佳方式是什么？（我不介意使用 flexbox 或其他现代 CSS 规范）

【问题讨论】：

您可以使用引导程序 cols-sm-push 和 cols-sm-pull 方法来实现 tihs
你在使用引导 css 吗？
@MukeshPrajapat & Suresh：不，我不使用引导程序。我不认为引导程序的网格可以解决这种情况，因为块 3 的位置取决于块 1 在平板电脑布局中的高度
你可以使用 flexbox 来制作，看看flexbox.io

标签： css responsive-design flexbox

【解决方案1】：

试试这个，它可能会有所帮助。您可以根据需要编辑 CSS

HTML 代码：

<div class="wrapper">
  <div class="left"> 1 </div>
  <div class="middle">2 </div>
  <div class="right"> 3 </div>
</div>

CSS 代码：

.wrapper div {float:left;margin-right:.5%;text-align:center;}
.wrapper div:last-child {margin-right:0;}
.left {background: yellow; width:33%}
.middle {background: green; width:33%}
.right {background: blue; width:33%}

【讨论】：

【解决方案2】：

您可以让元素在桌面上制作 float: left，每个宽度为 1/3，然后在平板电脑/移动设备上为它们提供 50% 宽度，并制作 1 和 3 float: right。

HTML：

<div class="b1">
  1
</div>
<div class="b2">
  2
</div>
<div class="b3">
  3
</div>

CSS：

div {
  float: left;
  width: calc(100%/3);
  box-sizing: border-box;
}

@media (max-width: 600px) {
  div {
    width: 50%;
  }
  .b1,
  .b3 {
    float: right;
  }
}

Working JSFiddle

【讨论】：

【解决方案3】：

div{
  border: 1px solid #333;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  float: left;
}
.div1{
  background : yellow;
  width: 25%;
}
.div2{
  background : red;
  width: 50%;
  min-height: 400px;
}
.div3{
  background : purple;
  width: 25%;
}
@media (max-width: 768px){
  .div1, .div3{
clear: right;
float: right;
width: 30%;
  }
  .div2{
width: 70%;
  }
}

<div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
<div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
<div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>

https://jsfiddle.net/yuywh5gv/

【讨论】：

哦，我以前尝试过这种方式，但宽度有误，所以它不起作用，现在很好:) 顺便说一句，似乎 2 clear: right 不是真的必要不是是吗？

【解决方案4】：

# 仅限手机屏幕 and (max-width:320px) # 仅限平板电脑屏幕 and (min-width:321px) and (max-width:768px) # 仅限桌面屏幕 and (min-width:769px)

  <div class="b1 col" >1</div>
  <div class="b2 con">2</div>
  <div class="b3 col">3</div>

在下面添加样式::

       div {
           border: 2px solid black;
           padding: 20px;
           float: left;
           box-sizing: border-box;
       }

       .con{
           width: 66.66%;
        }

       div.col {
                width: 16.5%;
       }

       .b1 {
            height: 50px;
            border-color: #ee8;
       }

       .b2 {
            height: 200px;
            border-color: #fcc;
       }

       .b3 {
            height: 80px;
            border-color: #caf;
        }

        @media screen and (min-width:321px) and (max-width:768px)  {
        div.col {
           width: 33.33%;
        }
        .b1,
        .b3 {
          float: right;
        }
  }

DEMO

【讨论】：