<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: 950px;
  margin: 0 auto;
  display: flex;
	flex-flow: row wrap;
}

.flex-item
{
  margin: 10px 0;
  border: 1px solid #f00;
}

.first
{
  flex-grow: 1;
  flex-basis: 200px;
}

.second
{
   order: 1;
   flex-grow: 2;
   flex-basis: 300px;
}

.third
{ 
   flex-grow: 1;
   flex-basis: 250px;
}

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

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