响应式网页设计/基础：改变列的垂直顺序可能吗？

Question

我使用 ZURB Foundation 制作了这个三列布局：

<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>
<div class="wrap">
  <div class="row">
    <div class="large-3 columns left-column">
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
      </ul>
    </div>
    <div class="content large-6 columns">
      <h2>Nam quam nunc blandit vel</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
      <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
    </div>
    <div class="right-column large-3 columns">
      <p>RIGHT COLUMN - Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
      <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
    </div>
</div>

举止还行。

当屏幕变小时，它会从一行三列变为堆叠的列。顺序：左栏，然后是内容区域，然后是右栏。

但最佳的是：

左列和右列各有 6 列（总和为 12）。
内容获得 12。
AND 顺序为：左列和右列并排。然后是全宽的内容区域。

这样的重新安排（付出适度的努力）可能吗？

Answer 1

您可以使用 pull 和 push class 来实现。像这样：

<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>
<div class="wrap">
  <div class="row">
<div class="small-6 medium-3 large-3 columns left-column">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>
<div class="small-6 right-column medium-3 large-3 medium-push-6  columns">
  <p>RIGHT COLUMN - Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
  <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
</div>
<div class="content medium-6 large-6 medium-pull-3 columns">
  <h2>Nam quam nunc blandit vel</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
</div>
<div class="small-6 right-column large-3 columns">
  <p>RIGHT COLUMN - Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
  <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
</div>
</div>

响应式网页设计/基础：改变列的垂直顺序可能吗？

Responsive Webdesign / Foundation: Changing the vertical order of columns possible?

html

css

responsive-design

zurb-foundation