响应SM和XS对齐

Question

我正在尝试开发一个代码，它在桌面上有两列，当涉及到＆＃39; XS＆＃39;和＆＃39; SM＆＃39;第一列应该在第二列之后。

这是我正在尝试的代码。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<section class="Container-fluid">
	<div class="row">
		<div class="col-md-6 col-xs-8 col-sm-8 col-sm-offset-2 col-xs-offset-2 col-md-offset-0">
			First box
		</div>
		<div class="col-md-6 col-xs-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-0">
			Second Box
		</div>
	</div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个。这是在bootstrap中。使用推，拉将有所帮助。顺便说一句，我也做了一些清理你的课程。

<section class="Container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-push-6 col-xs-8 col-xs-offset-2">
                Second Box
            </div>
            <div class="col-md-6 col-md-pull-6 col-xs-8 col-xs-offset-2">
                First box
            </div>          
        </div>
    </section>

Answer 2

您只需要考虑“先移动”并将“2”列放在标记的第一位：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-md-push-6 col-md-offset-0 col-xs-8 col-xs-offset-2">
      Second Box
    </div>
    <div class="col-md-6 col-md-pull-6 col-md-offset-0 col-xs-8 col-xs-offset-2">
      First box
    </div>          
  </div>
</div>

http://bootply.com/mexjTUoy6m

此外Container-fluid无效，因为CSS区分大小写，因此您需要小心使用类名。