相关疑难解决方法(0)

我正在使用顶部固定导航栏进行响应式布局.在下面我有两列,一个用于侧边栏(3),另一列用于内容(9).在桌面上看起来像这样

navbar
[3] [9]

当我resize移动时,navbar压缩和隐藏,然后侧边栏堆叠在内容的顶部,如下所示:

navbar
[3]
[9]

我想在顶部的主要内容,所以我需要将移动订单更改为:

navbar
[9]
[3]

我发现这篇文章涵盖了相同的观点,但已接受的答案已被编辑,表示该解决方案不适用于当前版本的Bootstrap.

如何在移动设备上重新排序这些列？或者,我怎样才能将sidbar list-group放入我的扩展导航栏？

这是我的代码:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum …

给定一个模板,由于其他要求无法修改HTML,如何在HTML中不按顺序显示(重新排列)div另一个上面的模板div？两者都div包含高度和宽度不同的数据.

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

希望很明显,期望的结果是:

Content to be above in this situation
Content to be below in this situation
Other elements

当尺寸固定时,很容易将它们定位在需要的位置,但是当内容变化时我需要一些想法.为了这种情况,请仅考虑两者的宽度为100%.

我特意寻找一个只有CSS的解决方案(如果不能解决的话,它可能必须满足其他解决方案).

此后还有其他元素.鉴于我所展示的有限场景,我们提到了一个很好的建议 - 假设它可能是最好的答案,但我也希望确保后面的元素不会受到影响.

我正在开发一个响应式网站,并遇到了一个有趣的问题.我有一些divs并排.它们可能有2到6个左右.当屏幕宽度不足以正确显示所有内容时,div会垂直堆叠.简单到使用CSS.

问题是,我需要它们按照不同的顺序排列.这很容易使用2或3个div(根据宽度更改div顺序),但在添加第四个时更具挑战性.

我可以使用position: absolute;并手动设置位置,但这会导致父级缩小而不能正确包含它们.

为了使这更复杂,我不能使用JavaScript.

使用两列:

(另)

HTML:

<div id="container">
    <div class="column-half column-half-2">
        First div on mobile, right div on desktop
    </div>
    <div class="column-half column-half-1">
        Second div on mobile, left div on desktop
    </div>
</div>

CSS:

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
    position: relative;
}
.column-half {
    display: table-cell;
    padding: 25px;
    vertical-align: top;
    width: 40%;
}
.column-half-1 {
    float: left;
}
.column-half-2 {
    float: right;
}

HTML,有4列:

<div id="container">
    <div class="column-quarter …

当屏幕尺寸小于480px时，我需要重新排序div。

我不想使用，position: absolute因为绿色区域的高度可能会因文字数量而异。

我需要将小屏幕顺序设置为红色，绿色，红色，绿色，红色，绿色（每个红色都位于紧邻的绿色之上，宽度为100％）。

任何的想法？非常感谢

*, html, body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}

.full_half {
    display: inline-block;
    width: 50%;
    background-color: green;
    float: left;
    min-height: 100px;
}

.pic {
    background-color: red;
    height: 100px;
}

.text {
    box-sizing: border-box;
    padding: 20px 120px;
}

@media screen and (max-width: 480px) {
    .full_half {
      width: 100%;
    }
    
    .text{
     padding: 0 0 !important;
    }
}

<div class="container">
    <div class="full_half pic"></div>
    <div class="full_half text">test</div>
</div> …