JSFiddle - React, Tailwind, and code Playground

by Mikhail Cheremukhin-Rerberg

HTML

<div class="main-container">
		<div class="table">таблица</div>
		<div class="img"> Картинка</div>
		<div class="price-with-buttom">кнопки</div>
	</div>

CSS

.main-container {
  width: 320px;
  height: 600px;
  margin: 0 auto;
  border: 1px solid black;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.table {
  width: 300px;
  height: 300px;
  border: 3px dashed red;
  margin: 5px 0;
   text-align: center;
}

.img {
  width: 300px;
  height: 200px;
  border: 3px dashed royalblue;
  margin: 5px 0;
  background-color: #9acfea;
  text-align: center;
}

.price-with-buttom {
  width: 300px;
  height: 200px;
  border: 3px dashed green;
   text-align: center;
}

@media all and (min-width: 768px) {
  .main-container {
    width: 670px;
    align-items: center;
    flex-flow: row wrap;
    flex-direction: column;
    height: 555px;
  }

  .table {
    order: 1;
  }

  .img {
    width: 334px;
    order: 3;
    height: 505px;
  }

  .price-with-buttom {
    order: 2;

  }
}