モバイル ビュー ポートのテーブル構造を修正しようとしています (私のものではない厄介なコードですが、追加のクラスを追加せずに修正する必要があります)。
以下でシナリオを説明しようとしました。その下にコードを示します。これで十分であることを願っています。それ以外の場合は、追加のコードを挿入します。
これは、ビューポートに追加の css がない場合の外観です。
_________________
| | |
| av | text |
|____|____________|
| | |
| av | username |
|____|____________|
これは私のcssでどのように見えるかです:
______
| |
| text |
|______|__________
|_av| | |
| |
| username |
|__________|
これは私がそれをどのように見せたいかです:
_________________
| |
| text |
|_________________|
| | |
| av | username |
|____|____________|
av = アバター
html:
<div class="row-fluid post-comment">
<div class="span6 offset3 margin-small">
<table class="table table-condensed no-table-border">
<tbody>
<tr>
<td class="avatar">
<img src="http://placehold.it/40x40" class="img-circle">
</td>
<td class="text">
<p>text...</p>
</td>
</tr>
<tr class="user-card">
<td rowspan="2" class="avatar">
<img src="http://placehold.it/50x50" class="img-circle">
</td>
<td rowspan="2" class="username">
// content
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.post-comment .span6 td.avatar {
display: none;
}
.post-comment .span6 .user-card td.avatar {
display: block;
}