مشاهده و تمرین روی کد ها

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
    font-family: tahoma;
    direction: rtl;
}

.flex-container > * {
    padding: 15px;
    -webkit-flex: 1 100%;
    flex: 1 100%;
}

.article {
    text-align: right;
}

header {background: black;color:white;}
footer {background: #aaa;color:white;}
.nav {background:#eee;}

.nav ul {
    list-style-type: none;
    padding: 0;
}
.nav ul a {
    text-decoration: none;
}

@media all and (min-width: 768px) {
    .nav {text-align:right;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
    footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>

<div class="flex-container">
<header>
  <h1>گالری شهر</h1>
</header>

<nav class="nav">
<ul>
  <li><a href="#">لندن</a></li>
  <li><a href="#">پاریس</a></li>
  <li><a href="#">توکیو</a></li>
</ul>
</nav>

<article class="article">
  <h1>لندن</h1>
    <p>لندن پايتخت انگلستان و پرجمعيت ترين شهر اين كشور است. اين شهر داراي منطقه اي شهري با جمعيت بيش از 13 ميليون نفر است.</p>
  <p>بر روي رودخانه تيمز اين شهر ، دو ورودي به شكل برجهايي وجود دارد كه پلي از بين آنها دو طرف رودخانه را به هم وصل مي كند. پيشينه اين پل و شهر به زمان تاسيس آن توسط رومي ها باز ميگردد كه نام ان را لندنيوم گذاشته بودند.</p>
  <p><strong>این صفحه را تغییر اندازه دهید تا ببینید چه اتفاقی می افتد</strong></p>
</article>

<footer>&copy;کپی رایت برای وب مهراز محفوظ است&copy;</footer>
</div>

</body>
</html>

Flexbox