フローティングテーブルセルは、右の高さ

Question

が、私は3つのセル|information| |two lines| |empty| 2行目|empty| |two lines| |information|を持つテーブルがあると、私のメディアクエリーは、これら2

へ

|information||two lines| 
|informatino||two lines| 

を変更する問題は、彼らは、すぐに私がいることをfloatとして消える二行にある削除しますdivが右.verticalLineここ

は問題https://jsfiddle.net/fh6unb7q/

.side { 
 
    width: 45%; 
 
} 
 
.verticalLine:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    border-left: 0.13em solid #90A4AE; 
 
    border-right: 0.13em solid #90A4AE; 
 
    height: 100%; 
 
    width: 16%; 
 
    margin-left: 42%; 
 
    box-sizing: border-box; 
 
} 
 
.verticalLine { 
 
    position: relative; 
 
    width: 10%; 
 
} 
 
.tr { 
 
    display: table-row; 
 
} 
 
.tc { 
 
    display: table-cell; 
 
} 
 
.year { 
 
    text-align: center; 
 
    color: #607D8B; 
 
} 
 
/* Media Queries */ 
 

 
@media only screen and (max-width: 768px) { 
 
    header h1 { 
 
    font-size: 3rem; 
 
    } 
 
    .tr > div.side { 
 
    display: none; 
 
    } 
 
    .tr > div.verticalLine { 
 
    float: right; 
 
    } 
 
    .tr > div.year { 
 
    float: right; 
 
    } 
 
    .tr > a { 
 
    float: left; 
 
    } 
 
    .side { 
 
    width: 90%; 
 
    } 
 
}

<div style="display: table;"> 
 
    <div class="tr"> 
 
    <a class="tc side" target="_blank" href="#"> 
 
     <h3>test test test test test test test test test test test test test </h3> 
 
    </a> 
 
    <div class="tc verticalLine"> 
 
    </div> 
 
    <div class="tc side"></div> 
 
    </div> 
 

 
    <div class="tr"> 
 
    <div class="tc side"></div> 
 
    <div class="tc verticalLine"> 
 
    </div> 
 
    <a class="tc side" target="_blank" href="#"> 
 
     <h3>test test test test test test test test test test test test test </h3> 
 
    </a> 
 
    </div> 
 

 
</div>

を示すjsfiddleされます

EDIT：コードは、フレックス使用して更新からhttps://jsfiddle.net/fh6unb7q/1/ HTML：

<div style="display: flex;"> 
    <a class="side" target="_blank" href="#"> 
     <h3>test test test test test test test test test test test test test </h3> 
    </a> 
    <div class="verticalLine"> 
    </div> 
    <div class="side"></div> 
</div> 

<div style="display:flex"> 
    <div class="side"></div> 
    <div class="verticalLine"> 
    </div> 
    <a class="side" target="_blank" href="#"> 
     <h3>test test test test test test test test test test test test test </h3> 
    </a> 
</div> 

CSS：

.side { 
    width: 45%; 
} 

.verticalLine:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    border-left: 0.13em solid #90A4AE; 
    border-right: 0.13em solid #90A4AE; 
    height: 100%; 
    width: 16%; 
    margin-left: 42%; 
    box-sizing: border-box; 
} 

.verticalLine { 
    position: relative; 
    width: 10%; 
} 



/* Media Queries */ 

@media only screen and (max-width: 768px) { 
    div.side { 
    display: none; 
    } 
    div.verticalLine { 
    float: right; 
    } 

    a { 
    float: left; 
    } 
    .side { 
    width: 90%; 
    } 
} 

あなたはまだ見ることができ、それは||が正しく整列されていないとメディアクエリが実行された後でも引き続き表示されます。

私はそれがこのようなので

|information||two lines| 
|informatino||two lines| 

Answer 1

のように整列することにしたいでしょうか？

https://jsfiddle.net/uce9hp9n/

それからちょうど二行目のコンテナにflex-direction: row-reverse;を追加します。あなたは、各行のコンテナに同じクラスを割り当てると、そのクラスのCSSルールを作成することができますフレックスソリューションで

：COMMENTに質問した後

ADDITION/EDIT。次に、次のような別のルールを作成します。

.my_row { 
    display:flex; 
} 
.my_row:nth-child(even): { 
    flex-direction:row; 
} 

これは、2番目ごとの行の順序を逆にします。