Question

我有这样的代码：

<div class="row inner">
      <div class="col-md-6 col-sm-12 col-xs-12">
        <h1>image is here...</h1>
      </div>
      <div class="col-md-6 col-sm-12 col-xs-12">
        <h2>Add</h2>
        <div class="row">
          <h3>text1</h3>
          <p><span>BlaBlaBla1</span></p>
        </div>
        <div class="row">
          <h3>text2</h3>
          <p><span>BlaBlaBla2</span></p>
        </div>
      </div>
    </div>

所以它看起来像在移动设备上：

link

但是我需要我的第二列显示在移动设备的顶部（不在底部）......

我可以在不改变HTML代码的情况下实现它吗？

plunker：https://plnkr.co/edit/BKPhHxbZO0VQnubblh7f?p=preview

Answer 1

如果使用bootstrap，为什么不只是添加推拉类？如果您不想修改标记，您也可以执行此javascript。你为什么不想修改标记？

<div class="row inner">
  <div class="col-md-6 col-md-push-6">
        <h2>Add</h2>
        <div class="row">
          <h3>text1</h3>
          <p><span>BlaBlaBla1</span></p>
        </div>
        <div class="row">
          <h3>text2</h3>
          <p><span>BlaBlaBla2</span></p>
        </div>
      </div>
  <div class="col-md-6 col-md-pull-6">
        <h1>image is here...</h1>
      </div>
</div>

修改

此外，如果要在特定媒体查询的引导程序中右对齐某些内容，请将其添加到样式表中。因此，在移动设备上text-align: right并在您的下一个媒体上重置它，您可以添加text-align: left

我怎样才能在移动设备上使用bootstrap在顶部对齐？

1 个答案: