Pfthb

.cont 
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 height: 500px;

.cell
 border: 2px solid black;

.cell-1 
 flex-basis: 100%;
 width: 70%;
 margin-right: 25px;

.cell-2,
.cell-3 
 width: 30%;

@media (max-width: 1000px) {
 .cont
 flex-wrap: nowrap;
 
 .cell 
 width: 100%;
 
 .cell-1, .cell-2, cell-3 
 width: 100%;
 
 .cell-1 
 order: 2;
 
 .cell-2 
 order: 1;
 
 .cell-3 
 order: 3;
 

<div class="cont">
 <div class="cell cell-1">
 <h2>One</h2>
 </div>
 <div class="cell cell-2">
 <h2>Two</h2>
 </div>
 <div class="cell cell-3">
 <h2>Three</h2>
 </div>
</div>

.cont 
 display: grid;
 grid-template: 'content side-1' 'content side-2';
 grid-template-columns: 7fr 3fr;
 grid-column-gap: 1em; 

.cell-1 
 grid-area: content;

.cell-2 
 grid-area: side-1;


.cell-3 
 grid-area: side-2;

@media(max-width: 768px) 
 .cont 
 grid-template: 'side-1' 'content' 'side-2'
 

<div class="cont">
 <div class="cell cell-1">
 <h2>One</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. Ut pharetra sit amet aliquam id diam maecenas. Nunc eget lorem dolor sed viverra. Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
 <p>Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.

 </div>

 <div class="cell cell-2">
 <h2>Two</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. 


 </div>

 <div class="cell cell-3">
 <h2>Three</h2>
 <p>Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. 
 </div>
 </div>