Question

我需要一个基础布局，在中等以上是：

[8][4A]
   [4B]

小：

[4A]
[8]
[4B]

我接近实现这一点，但是当我的8块中有很多内容时，4B被推到页面上，我需要将它放在4A下面的位置

这是codepen

Answer 1

您可以按此顺序堆叠它们还是会与您的模板冲突？似乎可以解决差距

<div class="row text-center">
  <div class="small-12 columns medium-4 medium-push-8 ">
     <div class="panel">        4A</div>
     <div class="panel">        4B</div>
  </div>

 <div class="small-12 medium-8 medium-pull-4 columns">
    <div class="panel">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
 </div>
</div>

如果您希望4b低于column medium-8，请在其后添加.clearfix

  <div class="small-12 medium-8 medium-pull-4 columns">
    <div class="panel">
         <p>Content</p>
         <p>Content</p>
        </div>
  </div>

   <div class="clearfix"></div> // here clear floating position

 <div class="small-12 columns medium-4 medium ">
    <div class="panel">4A</div>      
 </div>

基础网格中的推拉

1 个答案: