<div class="flex-container">
  <div class="flex-item first">یک</div>
  <div class="flex-item second">دو</div>
  <div class="flex-item third">سه</div>
</div>
html
{
  direction: rtl;
}

.flex-container
{
  width: 1100px;
  margin: 0 auto;
  display: flex;
	flex-flow: row nowrap;
}

.flex-item
{
  margin: 10px 0;
}

.first
{
   flex: 1 1 400px;
}
.second
{
   flex: 2 3 600px;
}

.third
{ 
 flex: 1 2 400px;
}

/* خطوط پایین نقش زیبا سازی دارند مهم نیستن */

body
{
  background-color: #1b1b1b;
}

.flex-container
{
  background-color: #fff;
}

.flex-item
{
  background-color: tomato;
  text-align: center;
  line-height: 2;
  color: #fff;
  font-weight: bold;
  font-size: 3em;
}

.flex-item:nth-child(odd)
{
  background-color: #e43;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js