css - 如何使 3 列在移动设备下方显示为 2 个半宽 + 1 个全宽

Question

感谢您的关注。

使用来自自定义 BigCommerce 主题的 Foundation.css 的修改版本，我有 3 列按预期从左到右显示，但我希望在移动设备上将第 3 列推到前 2 列下方。

因此在台式机/平板电脑上应该是:

.columns {
  @include grid-column(4);
}

移动端应该是这样的:

.columns {
  @include grid-column(6);
  &.third-column {
    @include grid-column(12);
  }
}

这是我的代码目前的样子:

.footer-column-row {
        @include grid-row;
        @include breakpoint(medium) {
            .footer-column {
                @include grid-column(4);
            }
        }
        @include breakpoint(small) {
            .footer-column {
                @include grid-column(6);
                    &.social-links {
                        @include grid-column(12);
                    }
                }
            }
        }
    }

.social-links 是第 3 列，我需要在移动设备上将其置于其他两列下方。我去掉了所有其他样式(颜色等)，因为这里不需要。

我在想我可能需要将一些列/行嵌套在彼此内部，或类似的东西，但我也认为可能会有一个不那么困惑的解决方案。

非常感谢任何帮助，如果您需要更多信息，请告诉我。

Answer 1

    <div class="grid-container footer">
<div class="grid-x grid-padding-x grid-margin-x">

             <hr>


        <div class="cell medium-4" small-offset-1"">
        <a class="button small primary imgCtr" href="tel:+15195551212" title="Click to Dial">Telephone: (519) 555-1212 <i class="fi-telephone"></i></a></div>
        <div class="cell medium-4" small-offset-1"">
        <a class="button small primary imgCtr" href="tel:+15195551212" title="Click to Dial">Fax: (519) 555-1212 <i class="fi-page"></i></a>
        </div>

        <div class="cell medium-4" small-offset-1"">
        <a class="button small primary imgCtr" href="mailto:office@anymail.com">Email Office  <i class="fi-page"></i></a>
         </div>


<div class="cell medium-12 ">
             <div class="media-object align-center">
              <div class="media-object-section middle">
                <div class="thumbnail">
                    <img src="assets/logos/PowerLogo.jpg" width="50">
                </div>
              </div>
          <div class="media-object-section">
            <p><span class="companyTitle">ABC Marketing Inc.</span><br>
            123 Main<br>
                Hometown, ON  A1B 2C3<br>
                Canada
            </p>
          </div>
        </div><!-- /media object -->
    </div><!-- /cell -->
</div>
</div>