如何在移动设备上使 3 列显示为 2 个半宽 + 1 个全宽答案

【问题标题】：How to make 3 columns appear as 2 half width + 1 full width underneath on mobile如何在移动设备上使 3 列显示为 2 个半宽 + 1 个全宽
【发布时间】：2020-01-18 21:16:00
【问题描述】：

感谢观看。

使用自定义 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 是第三列，我需要在移动设备上低于其他两列。我去掉了所有其他样式（颜色等），因为这里没有必要。

我在想我可能需要在彼此之间嵌套一些列/行，或者类似的东西，但我也认为可能会有一个不那么混乱的解决方案。

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

【问题讨论】：

能否请您也添加标记？没有内容就好了。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example

标签： css responsive-design zurb-foundation scss-mixins

【解决方案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>

【讨论】：