html - 响应式网页设计/基础 : Changing the vertical order of columns possible?

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 类来实现此目的。像这样:

<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>