Example Page

This is the flex container for the left side.

On wide screens it will be on the left.
On narrow screens when the responsive mode kicks in, it will be on top of the right side flex container.
If you don't want two columns you can just use a single division in place of the flex container and the two flex-item divisions.

Here's the basic HTML:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Your Page Title Here</title>
<meta name="description" content=" Your Description Here">
</head>
<body>


<div style="margin: 0 10%; padding: 12px; border-left: 1px solid black; border-right: 1px solid black;">

<h1>Example Page</h1>


<div class="flex-container">
<div class="flex-item-left">

left column content here

</div>
<div class="flex-item-right">

right column content here

</div>
</div>
</div>
</body>
</html>

This is the flex container for the right side.

On wide screens it will be on the right.
On narrow screens when the responsive mode kicks in, it will drop under the left side flex container.

Here's the basic CSS:

body {
background-image: url('images/your-bg.jpg');
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1.3vw;
}

/* two column flex box */

* {
box-sizing: border-box;
background: white;
}

.flex-container {
display: flex;
flex-wrap: wrap;
font-size: 1.4vw;
}

.flex-item-left {
padding: 20px;
flex: 50%;
}

.flex-item-right {
padding: 20px;
flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}