<header>
  header
  <nav>nav</nav>
</header>

<main>
  main
  
  <section class="ads">
    ( ads box )<br><br>image or linkBox or iframe ADS
  </section>
  
  <article>
    post1
    <header class="postHeader">
      ( post1 header )
      <h2>post1 title</h2>
      date of post publish : <time>2017/11/27</time>
      <br><br>
      author / category / comment number / visit number / post link
    </header>
    <div class="post_content">80first word post1</div>
    <footer>
      ( post1 footer )<br><br>read more button
    </footer>
  </article>
  <article>post2</article>
  <article>post3</article>
  <article>post4</article>
  <article>post5</article>
  
  <nav class="pagination">nav.pagination</nav>
</main>

<aside>
  (sidbar right)
  <div class="items">
    <header>item1 header</header>
    <section>item1 content</section>
  </div>
  <div class="items">
    <header>item2 header</header>
    <section>item2 content</section>
  </div>
  <div class="items">
    <header>item3 header</header>
    <section>item3 content</section>
  </div>
</aside>

<footer>footer</footer>

* {
  text-align: left;
}

body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0px auto 0px auto;
  direction: rtl;
  background-color: white;
  max-width: 1366px;
}

header {
  order: 1;
  /* flex-grow: 1; */
  /* flex-shrink: 1; */
  flex-basis: 100%;
  
  padding: 10px;
  margin:5px;
  color: black;
  background-color: lightgrey;
}
header.postHeader {
  background-color: black;
  color: white;
}

main {
  order: 3;
  flex-grow: 3;
  
  background-color: lightgrey;
  margin:5px;
  padding: 10px;
}

nav {
  background-color: black;
  color: white;
  padding: 10px;
  margin:10px;
}
nav.breadcrumb {
  padding: 10px;
  margin:10px;
  background-color: #16a085;
  color: white;
}
nav.pagination {
  padding: 10px;
  margin:10px;
  background-color: #c0392b;
  color: white;
}

article {
  padding: 10px;
  margin:10px;
  color: white;
  background-color: #27ae60;
}

aside {
  display: flex;
  flex-direction: column;
  order: 2;
  flex-grow: 1;
  
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}
aside .items {
  height: 200px;
  background-color: black;
  
  margin: 5px;
}
aside .items header {
  background-color: #27ae60;
}
aside .items section {
  background-color: transparent;
}


footer {
  order: 4;
  /* flex-grow: 1; */
  /* flex-shrink: 1; */
  flex-basis: 100%;
  
  padding: 10px;
  margin:5px;
  color: white;
  background-color: black;
}

section {
  padding: 10px;
  margin:10px;
  color: white;
  background-color: green;
}
section.ads {
  background-color: #d35400;
}
section#author {
  background-color: #2980b9;
}
section#tags {
  background-color: #8e44ad;
}
section#comment {
  background-color: #f39c12;
}
section#comment > section {
  background-color: black;
}

.post_content {
  padding: 10px;
  margin:5px;
  color: white;
  background-color: black;
}