根据屏幕大小动态更改元素位置

Posted 2023-03-06

【中文标题】根据屏幕大小动态更改元素位置

【英文标题】：Dynamically change element position depending on screen size

【发布时间】：2019-09-04 04:35:08

【问题描述】：

这是我的代码的 sn-p（来自 asp.net mvc 网络应用程序）：

<div class="jumbotron" style="margin-top: 20px; margin-bottom: -25px">
    <div class="row" style="margin-left: 0px; margin-top: -50px; margin-bottom: 20px">
<h2>ipsum lorem</h2>
</div>

<div class="row row-eq-height">
    <div class="col-md-3" style="vertical-align: top;">
        <a href="@Url.Action("Index", "ApplicationForm")" 
         class="btn btn-primary btn-lg" style="width: 200px; margin-top: 8px">Full</a>
    </div>
    <div class="col-md-9" style="vertical-align: top;">
        <div style="font-weight: bold">ipsum lorem</div>
        ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem
    </div>
</div>

它将链接显示为按钮和描述，我有 4 个。我的问题是，当屏幕较小（即移动设备）时，它会将描述显示为一个又大又细的列。

我想更改它并将其显示在按钮下方。有没有办法使用CSS 或Bootstrap 来实现？

谢谢。

【参考方案1】：

如果我对您的理解正确，您可以这样做：

<div class="row row-eq-height">
  <div class="col-md-3 col-sm-12 col-xs-12" style="vertical-align: top;">
    <a href="@Url.Action("Index", "ApplicationForm")" 
     class="btn btn-primary btn-lg" style="width: 200px; margin-top: 8px">Full</a>
  </div>
  <div class="col-md-9 col-sm-12 col-xs-12" style="vertical-align: top;">
    <div style="font-weight: bold">ipsum lorem</div>
    ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem
  </div>
</div>