title: How to flip the text inside the div tag?
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hot-deals-row{
    margin-top: 30px;
    background: #eaeaea;
  }
  .hot-deals-box{
    border: 1px solid #eaeaea;
  }
  .hot-deals-box .hot-deals-tab {
    display: table;
    width: 100%;
  }
  .hot-deals-box .hot-deals-tab .hot-deals-title{
    width: 45px;
    display: table-cell;
    text-transform: uppercase;
    font-size: 24px;
    text-align: center;
    background: #0088cc;
    color: #fff;
    padding-top: 2px;
  }
  .hot-deals-box .hot-deals-tab .hot-deals-title&gt;span{
    width: 100%;
    float: left;
    text-align: center;
  }
  .hot-deals-box .hot-deals-tab .hot-deals-title&gt;span.yellow{
    color: #ffcc00;
  }
  .hot-deals-box .hot-deals-tab .hot-deals-tab-box{
    display: table-cell;
    padding:25px;
  }
  .hot-deals-box .hot-deals-tab .hot-deals-tab-box .nav-tab li{
    line-height: 40px;
    border-bottom: 1px solid #eaeaea;
    text-transform: uppercase;
    padding-left: 15px;
  }
  .hot-deals-box .hot-deals-tab .hot-deals-tab-box .nav-tab li.active&gt;a{
    color: #0099cc;
  }
  .hot-deals-box .hot-deals-tab .box-count-down{
    margin-top: 20px;
    float: left;
    padding-left: 4px;
  }
  .hot-deals-box .hot-deals-tab .box-count-down .box-count{
    width: 67px;
    height:67px;
    border:1px solid #eaeaea;
    float: left;
    border-radius: 90%;
    text-align: center;
    padding: 10px;
    position: relative;
    color: #fff;
    margin-left: -4px;
    background: #fff;
  }
  .hot-deals-box .hot-deals-tab .box-count-down .dot{
    display: none;
  }
  .hot-deals-box .hot-deals-tab .box-count-down .box-count:before{
    width: 100%;
    height: 100%;
    background: #0088cc;
    float: left;
    content: '';
    border-radius: 90%;
  }
  .hot-deals-box .hot-deals-tab .box-count-down .box-count:after{
    content: '';
    width: 23px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 34px;
    left: 20px;
  }
  .hot-deals-box .hot-deals-tab .box-count-down .number{
    position: absolute;
    width: 100%;
    left: 0;
    top: 15px;
  }
  .hot-deals-box .hot-deals-tab .box-count-down .text{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 16px;
    font-size: 10px;
  }
  .hot-deals-box .hot-deals-tab-content-col{
    padding-left: 0;
  }
  .hot-deals-box .hot-deals-tab-content{
    padding: 30px 30px 0 0;
  }
  .hot-deals-box .product-list .left-block{
    border: 1px solid #eaeaea;
    padding: 0;
  }
  .hot-deals-box .product-list .right-block {
    text-align:center;  
    font-family: "Comic Sans MS", cursive;
    font-size: large;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hot-deals-row"&gt;
    &lt;div class="container"&gt;
      &lt;div class="hot-deals-box"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-2 col-md-2 col-lg-1"&gt;
            &lt;div class="hot-deals-tab"&gt;
              &lt;div class="hot-deals-title vertical-text"&gt;
                &lt;span&gt;D&lt;/span&gt;
                &lt;span&gt;E&lt;/span&gt;
                &lt;span&gt;A&lt;/span&gt;
                &lt;span&gt;L&lt;/span&gt;
                &lt;span class="yellow"&gt;O&lt;/span&gt;
                &lt;span class="yellow"&gt;F&lt;/span&gt;
                &lt;span&gt;T&lt;/span&gt;
                &lt;span&gt;H&lt;/span&gt;
                &lt;span&gt;E&lt;/span&gt;
                &lt;span class="yellow"&gt;d&lt;/span&gt;
                &lt;span class="yellow"&gt;a&lt;/span&gt;
                &lt;span class="yellow"&gt;y&lt;/span&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
            
            
            
            
            
            
             &lt;div class="col-sm-10 col-md-10 col-lg-10 hot-deals-tab-content-col"&gt;
            &lt;div class="hot-deals-tab-content tab-container"&gt;
              &lt;div id="hot-deal-1" class="tab-panel active"&gt;
                &lt;ul class="product-list owl-carousel nav-center" data-dots="false" data-loop="true" data-nav = "true" data-margin = "29" data-autoplayTimeout="1000" data-autoplayHoverPause = "true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":4}}'&gt;
                  &lt;li&gt;
                    &lt;div class="left-block"&gt;
                      &lt;a href="product_list.html"&gt;&lt;img class="img-responsive" alt="product" src="assets/data/option4/p8.jpg" /&gt;&lt;/a&gt;
  
                    &lt;/div&gt;
                    &lt;div class="price-percent-reduction2"&gt;
                      20% OFF
                    &lt;/div&gt;
                    &lt;div class="right-block"&gt;
                      &lt;h5 class="product-name"&gt;&lt;a href="#"&gt;Android Smartphone &lt;/a&gt;&lt;/h5&gt;
                      &lt;div class="content_price"&gt;
                        &lt;span class="price product-price"&gt;$48,95&lt;/span&gt;
                        &lt;span class="price old-price"&gt;$62,00&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;div class="left-block"&gt;
                      &lt;a href="product_list.html"&gt;&lt;img class="img-responsive" alt="product" src="assets/data/option4/p12.jpg" /&gt;&lt;/a&gt;
  
                    &lt;/div&gt;
                    &lt;div class="price-percent-reduction2"&gt;
                      30% OFF
                    &lt;/div&gt;
                    &lt;div class="right-block"&gt;
                      &lt;h5 class="product-name"&gt;&lt;a href="#"&gt;Micromax X1800&lt;/a&gt;&lt;/h5&gt;
                      &lt;div class="content_price"&gt;
                        &lt;span class="price product-price"&gt;$68,95&lt;/span&gt;
                        &lt;span class="price old-price"&gt;$82,00&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                    &lt;div class="left-block"&gt;
                      &lt;a href="register.html"&gt;&lt;img class="img-responsive" alt="product" src="assets/data/option4/p11.jpg" /&gt;&lt;/a&gt;
  
                    &lt;/div&gt;
                    &lt;div class="price-percent-reduction2"&gt;
                      40% OFF
                    &lt;/div&gt;
                    &lt;div class="right-block"&gt;
                      &lt;h5 class="product-name"&gt;&lt;a href="#"&gt;Desire 620G 5-Inch Dual SIM Android &lt;/a&gt;&lt;/h5&gt;
                      &lt;div class="content_price"&gt;
                        &lt;span class="price product-price"&gt;$58,95&lt;/span&gt;
                        &lt;span class="price old-price"&gt;$72,00&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;div class="left-block"&gt;
                      &lt;a href="product_list.html"&gt;&lt;img class="img-responsive" alt="product" src="assets/data/option4/p12.jpg" /&gt;&lt;/a&gt;
  
                    &lt;/div&gt;
                    &lt;div class="price-percent-reduction2"&gt;
                      10% OFF
                    &lt;/div&gt;
                    &lt;div class="right-block"&gt;
                      &lt;h5 class="product-name"&gt;&lt;a href="#"&gt;Canvas Juice 2 AQ5001 &lt;/a&gt;&lt;/h5&gt;
                      &lt;div class="content_price"&gt;
                        &lt;span class="price product-price"&gt;$84,95&lt;/span&gt;
                        &lt;span class="price old-price"&gt;$95,00&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://i.stack.imgur.com/N9rES.png" rel="nofollow">image1</a></p>
  
  <p>my desktop view is like shown in the image1.</p>
  
  <p><a href="http://i.stack.imgur.com/Ag7jQ.png" rel="nofollow">image2</a></p>
  
  <p>when i resize my screen the output i get is shown in the image2.</p>
  
  <p>Now i want to convert these image2 into the horizontal view when my screen size is 767px.</p>