Question

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

＆＃13;

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

＆＃13;

行为很好。

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

但最佳的是：

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

这种重新排列（适度努力）是否可行？

Answer 1

您可以使用multiDexEnabled和pull类来实现此目的。像这样：

＆＃13;

push

＆＃13;

响应式Webdesign / Foundation：可能更改列的垂直顺序？

1 个答案: