6

画面サイズが 480 以下に縮小されたときに、コンテンツの位置を順序付ける方法はあるのでしょうか。私が意味するのは、列 3 には名前、番号、住所などがあり、列 2 には社会的なもの、列 1 には画像があります。名前と住所を最初に積み上げ、次に画像、次にソーシャル アイコンを積み上げたいと考えています。順番は 3,1,2 です。応答性を維持しようとしています。

CSS:

/*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
} 

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GRID OF THREE           ============================================================================= */


.span_3_of_3 {
width: 100%; 
}

.span_2_of_3 {
width: 66.1%; 
}

.span_1_of_3 {
width: 32.2%; 
}


 /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

 @media only screen and (max-width: 480px) {
.span_3_of_3 {
    width: 100%; 
}
.span_2_of_3 {
    width: 100%; 
}
.span_1_of_3 {
    width: 100%;
}
}

HTML:

<div class="section group">
<div class="col span_1_of_3">
This is column 1
</div>
<div class="col span_1_of_3">
This is column 2
</div>
<div class="col span_1_of_3">
This is column 3
</div>
</div>
4

3 に答える 3

15

ソースの順序をモバイル用に最適化し、メタデプトのソリューションを使用してデスクトップ用に列を並べ替える方が効率的です。

ただし、何らかの理由でソースの順序を変更できない場合、または並べ替えたい要素の幅がわからない場合は、Flexbox が必要です。

http://jsfiddle.net/4KUUt/3/

/*  SECTIONS  */
/* line 5, ../sass/test.scss */
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}

/* line 11, ../sass/test.scss */
.a {
  background-color: #CCF;
}

/* line 14, ../sass/test.scss */
.b {
  background-color: #CFC;
}

/* line 17, ../sass/test.scss */
.c {
  background-color: #FCC;
}

/*  GRID OF THREE           ============================================================================= */
@media only screen and (min-width: 480px) {
  /* line 24, ../sass/test.scss */
  .span_3_of_3 {
    width: 100%;
  }

  /* line 28, ../sass/test.scss */
  .span_2_of_3 {
    width: 66.1%;
  }

  /* line 32, ../sass/test.scss */
  .span_1_of_3 {
    width: 32.2%;
  }

  /*  COLUMN SETUP  */
  /* line 37, ../sass/test.scss */
  .col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
  }

  /* line 42, ../sass/test.scss */
  .col:first-child {
    margin-left: 0;
  }
}
@media only screen and (max-width: 480px) {
  /* line 48, ../sass/test.scss */
  .section {
    width: 100%; /* fix for Firefox */
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  /* line 53, ../sass/test.scss */
  .a {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-flex-order: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }

  /* line 57, ../sass/test.scss */
  .b {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-flex-order: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
}


<div class="section group">
    <div class="col span_1_of_3 a">This is column 1</div>
    <div class="col span_1_of_3 b">This is column 2</div>
    <div class="col span_1_of_3 c">This is column 3</div>
</div>

メディア クエリをもう少し効率的にするように変更したことに注意してください。

于 2013-03-31T00:20:28.590 に答える
0

うーん、これは奇妙な解決策ですが、jQueryを使用しています:)実験中です。

まず、HTML マークアップ内にクラスを追加しました。次に、クラスのこのプロパティをモバイル用に追加しました.third

.third {
    width: 100%;
    margin: 0;
    position: absolute;
    top: 0;
}

後者はこのjQueryコード

$(window).resize(function(){
    if ($(".third").css("position") == "absolute") 
    {
        $(".first").css("margin-top", $(".third").height());
    }
    else
    {
        $(".first").css("margin-top", "1%");
    }
});

多くの変更があるので、このフィドルを見てくださいhttp://jsfiddle.net/AYcVF/2/

誰かが CSS のみの解決策を持っているかもしれませんが、これが今のところ私ができる最善の方法です。

于 2013-03-31T00:15:28.077 に答える