html - Bootstrap div 左右浮动

Question

https://codepen.io/milo-boyd/pen/NzebMJ?page=1&

如何将按钮左对齐，图像右对齐？ HTML 不会改变。谢谢。

.button {
  float:right
}

.img {
  float:left
}

<div class="container">
  <div class="row">

  <div class="col-md-6 text">
    <button type="button" class="btn btn-warning button">Warning</button>

  </div>

 <div class="col-md-6 img">
   <img 
   src="https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" 
   style="width:100%"/>
  </div>
    
</div>
</div>

Answer 1

试试这个

https://codepen.io/anon/pen/GGPNVw?editors=1100 .

html 没有变化。

.row {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  justify-content: space-between;
}

.text {
  float:left;
}

<div class="container">
  <div class="row">
    <div class="col-md-6 img">
      <img src="https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" style="width:100%"/>
    </div>
  
    <div class="col-md-6 text">
      <button type="button" class="btn btn-warning button">Warning</button>
    </div>    
</div>
</div>