bootstrap 4 - 两列布局，第二列在移动视图中显示详细信息答案

【问题标题】：bootstrap 4 - two column layout with second column to show details in mobile viewbootstrap 4 - 两列布局，第二列在移动视图中显示详细信息
【发布时间】：2018-03-01 23:53:07
【问题描述】：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-xs-12">
        <h1>Servers</h1>
        <ul>
          <li>server 1</li>
          <li>server 2</li>
          <li>server 3</li>
        </ul>
      </div>
      <div class="col-md-6 col-xs-12">
        <h1>server details</h1>
        <p class="lead">server 1 is online.</p>
      </div>
    </div>
  </div>
  <!-- /.container -->

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>


</body>

我想创建一个引导 2 列布局。具有服务器列表的第一列。第二列有服务器详细信息。当没有选择服务器时 - 它显示在线服务器的数量等。

在移动视图上 - 我不想让第 2 列低于第 1 列。但我希望隐藏第 2 列或在（从右到左）滑动时显示。第2列隐藏也可以。在移动视图上 - 显示服务器列表，当用户单击一台服务器时，视图应移动到显示服务器详细信息的 column2。我可以在第 2 列加载/呈现详细信息。

我有以下类的列：

column1 - col-md-6, col-sm-12

column2 - col-md-6, col-sm-12

有人可以指导我正确的方向吗？

【问题讨论】：

请给我html css代码
getbootstrap.com/docs/4.0/utilities/display
添加了html代码。

标签： css html twitter-bootstrap responsive-design bootstrap-4

【解决方案1】：

您需要从 css 创建它。通过使用媒体查询使用不同的 ID 或类名潜水两个 div。而且，

@media only screen and (max-width:300px){
  .column2{
    display:none;
  }
}

当设备屏幕宽度低于 300px 时，这将隐藏 div

【讨论】：