短篇故事

假设我的HTML已经完成了:

<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>

它看起来像这样:

------------
| Block A  |
------------
| Block B  |
------------
| Block C  |
------------

现在我想切换块的顺序.我怎么能只用CSS做到这一点？

------------
| Block C  |
------------
| Block A  |
------------
| Block B  |
------------

我知道有一些hacky解决方案,比如使用position:absolute,但这并不能保持对该display:block属性的有效使用.也就是说,当块体尺寸增大时,块会向下推动其他块.

很长的故事

当用户使用计算机查看我的网页时,这些块按以下顺序显示:

1. 基本信息.
2. 活动安排.
3. iPhone应用广告

iPhone应用程序广告是最后放置的,因为它对计算机用户来说并不是非常重要.一小部分计算机用户将拨打电话并安装应用程序.

如果移动用户访问此站点,则iPhone应用程序广告应该是页面上最重要的事情.因此,它应该移到顶部:

1. iPhone应用广告
2. 基本信息.
3. 活动安排.

我希望iPhone和计算机用户共享相同的HTML,但有一个CSS媒体查询切换块的顺序.

@media only screen and (max-device-width: 480px) {
   #blockC {
      /* magic order switching */
   }
}

鉴于HTML

<div>
   <div id="content1"> content 1</div>
   <div id="content2"> content 2</div>
   <div id="content3"> content 3</div>
</div>

呈现为

content 1
content 2
content 3

我的问题:

有没有办法在不更改HTML部分的情况下仅使用CSS来渲染它.

content 1
content 3
content 2

的jsfiddle

我想改变某个像素大小的浮动div的顺序.

在默认状态下,它们都具有50%的宽度,并且它们彼此相邻.

低于600px的屏幕尺寸(或w/e无关紧要)我希望第二个div(红色一个)漂浮在第一个div(黄色一个)之上.

如何仅使用CSS解决方案？

HTML

<div class="yellow"></div>
<div class="red"></div>

CSS

.yellow {
    background: yellow;
    width: 50%;
    height: 300px;
    float:left;
}

.red {
    background: red;
    width: 50%;
    height: 300px;
    float:left;
}

@media screen and (max-width:600px) {
    .yellow {
        background: yellow;
        width: 100%;
        height: 300px;
        float:left;
    }

    .red {
        background: red;
        width: 100%;
        height: 300px;
        float:left;
    }
}

我想要的解决方案是:

RED DIV

黄色的DIV

但现在是:

黄色的DIV

RED DIV

然而它是一个基本的布局问题,可能有一个答案,但我找不到它,可能缺少一个合适的搜索字符串.在CSS的帮助下,是否可以在移动视图中将右侧div叠加在左侧div上？默认行为是左侧div下的右侧div浮动.

CSS:

.left {
    position: relative;
    float: left;
    background: #F48024;
    width:576px;
    height: 324px;
}
.right {
    position: relative;
    float: left;
    background: #EFF0F1;
    width:576px;
    height: 324px;
}

HTML:

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>

要了解它,请查看图表.我需要在此图中给出第3个布局.

有没有人知道如何实现以下任何示例或教程:

在桌面上,布局将是:

在移动设备上,布局将更改为:

正如您所看到的,我希望方框2和方框3在移动设备上重新排序和交换位置

有人有任何提示或建议吗？

我可以使用bootstrap本地执行此操作吗？我正在使用版本4(在alpha中),但如果它适用于版本3,它应该适用于v4.

我在列中有2个div就像这样

<div class="row">
    <div class="col-xs-12">
        <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
        <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
    </div>
</div>

有没有办法可以让div在移动设备上交换？我不想在这里使用任何javascript,我想只使用"bootstrap"类,如果可能的话.

如果使用bootstrap是不可能的,那么请仅使用css.

如果我在以下庄园中订购了3个Div箱(真正的任何号码):

<div>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

如何在带有id one的div之后显示带有id 的div three而不更改html的结构？

这就是html应该显示为:

________________________
| ____________________ |
| | id=two           | |
| |                  | |
| |__________________| |
| ____________________ |
| | id=three         | |
| |                  | |
| |__________________| |
| ____________________ |
| | id=one           | |
| |                  | |
| |__________________| |
|______________________|

我有一个登录按钮,如下所示,当我尝试点击该菜单打开时,我有一个ASP.Net登录控件,它显示在我的滑块下面而不是它上面.所以我想将它放在顶部我的滑块和我的滑块和登录按钮之间我有菜单栏.

那我该怎么做？

我在SO上关注了这个问题,但没有成功

这是我的CSS:

#container {
    width:780px;
    margin:0 auto;
    position: relative;
}
#topnavsignin {
    padding:10px 0px 12px;
    font-size:11px;
    line-height:23px;
    text-align:right;
    margin-top:-60px;
    margin-left:120px;
}
#topnavsignin a.signin { 
    background:#88bbd4;
    padding:4px 6px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    *background:transparent url('../images/signin-nav-bg-ie.png') no-repeat 0 0;
    *padding:4px 12px 6px;
    margin-left:420px;

 }
#signin_menu {
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    display:none;
    background-color:#ddeef6;
    position:absolute;
    width:350px;
    z-index:100;
    border:1px transparent;
    text-align:left;
    top: 24.5px; 
    right: 171px; 
    margin-top:-55px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#789;
    font-size:11px;
    padding: 5px;

}

这就是我展示它的方式:

<div …

<div class="first"></div>
<div class="second"></div>

我试着用CSS这样做对其进行更改float:left与float:right和下扭转它@media (max-width:820px),我相信在过去的工作,但没有工作的查询.

尝试了一个简单的JQuery:

if ($(window).width() < 820) {
   $( ".first" ).insertAfter( $( ".second" ) );
}
else {
   $( ".first" ).insertBefore( $( ".second" ) );
}

我知道这应该是如此简单,但它不是在打球,我做错了什么？

我正在使用设置为显示的块来构建网页布局:table-cell.一切都工作正常,但我不能连续翻转单元格(改变他们的顺序)并想知道是否有这样的可能性或一些技巧我可以用来实现这一点.

我需要使用CSS和display来实现这一点:table-cell :)

在此先感谢您的任何建议.

HTML

<div class="dtc">
    <div>Item1</div>
    <div>Item2</div>
</div>

CSS

.dtc{
    display: table;
    width: 100%;
}
.dtc > *{
    display: table-cell;
}

当前表格:

+-------+-------+
| Item1 | Item2 |
+-------+-------+

期望的结果:

+-------+-------+
| Item2 | Item1 |
+-------+-------+

I have a parent div with 6 children divs as follows

<div class="work-wrap">
   <div class="work-item">1</div>
   <div class="work-item">2</div>
   <div class="work-item">3</div>
   <div class="work-item">4</div>
   <div class="work-item">5</div>
   <div class="work-item">6</div>
</div>

I want to have a result like this

2 4 6

1 3 5

是否可以使用 CSS 更改 DOM 元素顺序？我有一个 iframe，我想将工具栏从iframe 的主要内容的上方更改为下方。

所以从这个：

<iframe>
<html>
  <body>
    <div id='toolbar'></div>
    <div id='main_content'></div>
    <div id='other_stuff'></div>
  </body>
</html>
</iframe>

对此：

<iframe>
<html>
  <body>
    <div id='main_content'></div>
    <div id='toolbar'></div>
    <div id='other_stuff'></div>
  </body>
</html>
</iframe>

如果使用 CSS 无法做到这一点，有人可以建议如何在 Javascript 中做到这一点吗？操纵 iframe 内容总是让我感到困惑 *^%$。作为一个实际应用，我实际上指的是使用 Crocodoc (https://crocodoc.com/docs/walkthrough/skinning/) 生成的iframe，所以我的目的是让这个问题和答案对使用此服务的人有价值也。

为了清晰可见，我绘制了三张不同的图像，显​​示桌面、移动视图中的 div 状态以及我试图在移动视图中获取的内容。

1. 这是桌面视图中 div 的当前状态。

超文本标记语言

<div id="wrapper">
    <div id="left-nav">recent posts</div>
    <div id="main">articles listing</div>
</div>

2.移动设备媒体查询使两个div全宽后我得到什么。

3.这就是我想要得到的

我想出的解决方案是将 div 放置在具有浮动属性的 html 中改变位置，如下所示。

<div id="wrapper">
    <div id="main" style="float:right;">articles listing</div>
    <div id="left-nav" style="float:left;">recent posts</div>
</div>

这在清除浮动后在移动视图上有效。但这是在一些 CMS 中，所以如果可能的话，我希望用 css 来获取它。

问题：当我将两个 div 设为全宽（在具有媒体查询的移动设备中）时，最近的文章div 首先出现，然后是文章列表，但如何才能先获取文章列表，然后再获取最近的帖子？