主页 / 问题 / 666099
Accepted
Dmitry Chebakov
Asked:2020-05-15 10:18:27 +0000 UTC2020-05-15 10:18:27 +0000 UTC

移动引导网格

  • 772

有 3 个<div>： 

<div class="col-md-2 col-xs-12">блок 1</div>
<div class="col-md-8 col-xs-12">блок 2</div>
<div class="col-md-2 col-xs-12">блок 3</div>

请告诉我如何使当屏幕宽度变为 时xs，块 3 上升，即结果是这样的： 

<div class="col-md-2 col-xs-12">блок 3</div>
<div class="col-md-2 col-xs-12">блок 1</div>
<div class="col-md-8 col-xs-12">блок 2</div>
html

1 个回答

  1. Best Answer

    列排序

    例子

    [class*=col-] {
  text-align: center;
  border: 1px solid #ccc;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-4 col-xs-12 col-md-push-8 col-sm-push-8">3</div>
    <div class="col-md-4 col-sm-4 col-xs-12 col-md-pull-4 col-sm-pull-4">1</div>
    <div class="col-md-4 col-sm-4 col-xs-12 col-md-pull-4 col-sm-pull-4">2</div>
  </div>
</div>

    • 3

相关问题