html - 如何翻转div标签内的文本？

.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>span{
  width: 100%;
  float: left;
  text-align: center;
}
.hot-deals-box .hot-deals-tab .hot-deals-title>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>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;
}

<div class="hot-deals-row">
  <div class="container">
    <div class="hot-deals-box">
      <div class="row">
        <div class="col-sm-2 col-md-2 col-lg-1">
          <div class="hot-deals-tab">
            <div class="hot-deals-title vertical-text">
              <span>D</span>
              <span>E</span>
              <span>A</span>
              <span>L</span>
              <span class="yellow">O</span>
              <span class="yellow">F</span>
              <span>T</span>
              <span>H</span>
              <span>E</span>
              <span class="yellow">d</span>
              <span class="yellow">a</span>
              <span class="yellow">y</span>

            </div>
          </div>






           <div class="col-sm-10 col-md-10 col-lg-10 hot-deals-tab-content-col">
          <div class="hot-deals-tab-content tab-container">
            <div id="hot-deal-1" class="tab-panel active">
              <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}}'>
                <li>
                  <div class="left-block">
                    <a href="product_list.html"><img class="img-responsive" alt="product" src="assets/data/option4/p8.jpg" /></a>

                  </div>
                  <div class="price-percent-reduction2">
                    20% OFF
                  </div>
                  <div class="right-block">
                    <h5 class="product-name"><a href="#">Android Smartphone </a></h5>
                    <div class="content_price">
                      <span class="price product-price">$48,95</span>
                      <span class="price old-price">$62,00</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="left-block">
                    <a href="product_list.html"><img class="img-responsive" alt="product" src="assets/data/option4/p12.jpg" /></a>

                  </div>
                  <div class="price-percent-reduction2">
                    30% OFF
                  </div>
                  <div class="right-block">
                    <h5 class="product-name"><a href="#">Micromax X1800</a></h5>
                    <div class="content_price">
                      <span class="price product-price">$68,95</span>
                      <span class="price old-price">$82,00</span>
                    </div>
                  </div>
                </li>

                <li>
                  <div class="left-block">
                    <a href="register.html"><img class="img-responsive" alt="product" src="assets/data/option4/p11.jpg" /></a>

                  </div>
                  <div class="price-percent-reduction2">
                    40% OFF
                  </div>
                  <div class="right-block">
                    <h5 class="product-name"><a href="#">Desire 620G 5-Inch Dual SIM Android </a></h5>
                    <div class="content_price">
                      <span class="price product-price">$58,95</span>
                      <span class="price old-price">$72,00</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="left-block">
                    <a href="product_list.html"><img class="img-responsive" alt="product" src="assets/data/option4/p12.jpg" /></a>

                  </div>
                  <div class="price-percent-reduction2">
                    10% OFF
                  </div>
                  <div class="right-block">
                    <h5 class="product-name"><a href="#">Canvas Juice 2 AQ5001 </a></h5>
                    <div class="content_price">
                      <span class="price product-price">$84,95</span>
                      <span class="price old-price">$95,00</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div> 

image1

我的桌面视图如图1所示。

image2

当我调整屏幕大小时，我得到的输出显示在image2中。

现在，当我的屏幕尺寸为767px时，我想将这些image2转换为水平视图。

最佳答案

您需要以下媒体查询：

@media screen and (max-width: 767px) {
  .hot-deals-box .hot-deals-tab .hot-deals-title > span {
    width: auto;
    display: inline-block;
  }
}

JSfiddle Demo

.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 > span {
  width: 100%;
  float: left;
  text-align: center;
}
.hot-deals-box .hot-deals-tab .hot-deals-title>span.yellow {
  color: #ffcc00;
}
.hot-deals-box .hot-deals-tab .hot-deals-tab-box {
  display: table-cell;
  padding: 25px;
}
@media screen and (max-width: 767px) {
  .hot-deals-box .hot-deals-tab .hot-deals-title > span {
    width: auto;
    display: inline-block;
  }
}

<div class="hot-deals-row">
  <div class="container">
    <div class="hot-deals-box">
      <div class="row">
        <div class="col-sm-2 col-md-2 col-lg-1">
          <div class="hot-deals-tab">
            <div class="hot-deals-title vertical-text"> <span>D</span>
              <span>E</span>
              <span>A</span>
              <span>L</span>
              <span class="yellow">O</span>
              <span class="yellow">F</span>
              <span>T</span>
              <span>H</span>
              <span>E</span>
              <span class="yellow">d</span>
              <span class="yellow">a</span>
              <span class="yellow">y</span>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>