How to arrange elements in a responsive block without changing the html structure?

Question

css

Greetings. There is an adaptive block with a picture and a description for it. Question: how to make the price, reviews, and size, order, compare buttons go right after each other in the right column so that the text does not overlap and everything looks neat at all screen resolutions? fiddle

.thumbnail-container {
  float:left;
  margin-right:30px;
}
.content-description {
    float: left;
    max-width:300px;
}
.single_variation {
    float:right;
}
.rating-box, .product-actions, .variations, .button {
  clear:right;
  float:right;
}

<div class="product-frame ">
  <div class="thumbnail-container">
    <a href="#">
      <div class="front">
        <img width="250" height="250" src="http://www.fragranceoilexpress.com/files/2194097/store/55.jpg">
      </div>
    </a>
  </div>
</div>
<!--/ .thumbnail-container-->
<div class="content-description">
  <div class="product-section">
    <h3>Неаполитанская пицца</h3>
    <form class="cart" method="post">
      <div class="single_variation_wrap">
        <div class="single_variation"><span class="price"><ins><span class="amount">150.000&nbsp;руб.</span>
          </ins>
          </span>
        </div>
        <div class="rating-box">
          <div class="rating readonly-rating" data-score="0" title="Рейтинг еще не присвоен" style="width: 100px;"></div>
          <span><a class="to-rating" href="#reviews">0 Отзыв(ы)</a></span>
        </div>
        <div class="variations_button">
          <div class="clear"></div>
          <p><strong>Состав и вес блюда</strong>
            <br>Состав: <em>лапша яичная, курица, чеснок, лук, соевый соус, индийский орех</em>
            <br>
            <strong>Порция</strong>: <em>150г.</em>
          </p>
          <strong>Калорийность</strong>
          <br>
          <em>Белки(100г): 11,49г.</em>
          <br>
          <em>Жиры(100г): 22,32г.</em>
          <br>
          <em>Углеводы(100г): 32,33г.</em>
          <br>
          <em>Энерг. ценность(100г): 368,39калл.</em>
          <table class="variations" cellspacing="0">
            <tbody>
              <tr>
                <td class="label">
                  <label for="pa_size">Размер</label>
                </td>
                <td class="value">
                  <select id="pa_size" name="attribute_pa_size">
                    <option value="large" selected="selected">бол.</option>
                    <option value="medium">средн.</option>
                    <option value="small">мал.</option>
                  </select>
                </td>
              </tr>
            </tbody>
          </table>
          <button type="submit" class="button">Заказать</button>
          <div class="product-actions"><a href="/catalog/picca/?action" class="compare" data-product_id="3309">Добавить к сравнению</a>	
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 1

You could at least send an example.

Answer 2

order property for flexboxes