Question

我的页面设置在具有不同列宽的行中。例如：

<div class="row">
  <div class="span6">Left side</div><!-- 50% width -->
  <div class="span6">Right side</div><!-- 50% width -->
</div>

我有适当的属性，因此在较窄的屏幕宽度上，每列的宽度为100％。当然，这使得＆＃34;右侧＆＃34;出现在＆＃34;左侧＆＃34;由于它出现在页面上的顺序。

我试图找出是否有任何方法可以向＆＃34;右侧添加课程或其他内容＆＃34; div使得如果屏幕宽度使每列100％宽度，则右侧将显示在左侧，而不是在下方。

最好我只想用CSS做这个，但如果我必须使用jQuery，我也可以这样做。

.row { 
width:100%; 
margin:0 auto; 
}

.span1 { width:8.33%; }

.span2 { width:16.66%; }

.span3 { width:25%; }

.span4 { width:33.33%; }

.span5 { width:41.66%; }

.span6 { width:50%; }

.span7 { width:58.33%; }

.span8 { width:66.66%; }

.span9 { width:75%; }

.span10 { width:83.33%; }

.span11 { width:91.66%; }

.span12 { width:100%; }

.span1-5 { width:20%; } /* This column can be used as a one fifth of the row */

.span1-8 { width:12.5%; } /* This column can be used as a one eigth of the row */ 

.span1, 
.span2, 
.span3, 
.span4, 
.span5, 
.span6, 
.span7,
.span8, 
.span9, 
.span10, 
.span11, 
.span12, 
.span1-5, 
.span1-8 {
  min-height: 1px; 
  float: left; 
  padding-left: 10px; 
  padding-right: 10px; 
  position: relative; 
}

@media only screen and (max-width: 960px) {
.row .row .span1, 
.row .row .span2, 
.row .row .span3, 
.row .row .span4, 
.row .row .span5, 
.row .row .span6, 
.row .row .span7,
.row .row .span8, 
.row .row .span9, 
.row .row .span10, 
.row .row .span11, 
.row .row .span12, 
.row .row .span1-5, 
.row .row .span1-8 {
    width: 100% !important;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px; 
}

Answer 1

将右侧div放在第一位，使其浮动到右侧：

<div class="row">
  <div class="span6" style="float: right;">Right side</div>
  <div class="span6">Left side</div>
</div>

这应该有效。可能必须对CSS进行一些其他更改。为简单起见，我将一个CSS声明内联。您可能希望将其移动到CSS文件中。

CSS当屏幕宽度改变其属性时，排列元素的顺序

1 个答案: