Question

参见示例代码： http://www.bootply.com/kp2Iv3uJ4j

简单地说，我想仅使用CSS更改从左到右的列。有没有办法只使用CSS而不必更改HTML？

例如，如果第一列中有徽标，第二列中有文本，我可以让它们只使用CSS来切换位置吗？

非常感谢你的时间！

沃伦

Answer 1

按如下方式将行反转：

.row {
   flex-direction:row-reverse;
}

以下是示例：Bootply

或者，如果您确实想要更改某些HTML，那么这将是更好的选择：

<div class="row flex-row-reverse">
  <div class="col-md-6 first">
     <img src="http://placehold.it/350x150?text=first">
  </div>
  <div class="col-md-6 second">
      <img src="http://placehold.it/350x150?text=second">
  </div>
</div>

以下是Bootply

的示例

Answer 2

您可以在HTML push-md-6（从左到右）和pull-md-6（从右到左）的Bootstrap类中应用。

在你的例子上：

col-md-6 first push-md-6
col-md-6 second pull-md-6

或者，只使用你的类.first和.second

.first { left: 50%; }
.second { right: 50%; }

Answer 3

试试这个：

select sum(cashamount) as sumcashsalesamount           
from master_transaction 
where DATE(transactiondate)BETWEEN '2017-02-22' AND '2017-03-28' 
order by transactiondate desc

Updated Link

切换列放置Bootstrap 4使用CSS

3 个答案: