Responsive column for CSS not working

Question

Why does the image not automatically go down if I reduce the width(mobile device)? Is there something wrong with my , @media or something else?

*I tried to make it responsive like bootstrap column. I divide it : twothird and third part, but the third part doesn't go down responsively, stuck on the right side even if I already adjust twothird and third only implemented in device with min-width:601px. Please help.

Thank you in advance.*

html {  
   box-sizing : border-box;
}*,
*:before,
*:after {  
   box-sizing : inherit;
}

html {  
   -ms-text-size-adjust : 100%;
   -webkit-text-size-adjust : 100%;
   overflow-x : hidden;
   min-height: 100%;
   min-width: 100%;
}

html, body {  
   font-family : Verdana, sans-serif;
   font-size : 15px;
   line-height : 1.5;
}

body {  
   margin : 0;
}

a {  
   background-color : transparent;
   -webkit-text-decoration-skip : objects;
   color : inherit;
}

a : active, a : hover {  
   outline-width : 0;
}

h1 {  
   font-size : 36px;
}

h2 {  
   font-size : 30px;
}

h3 {  
   font-size : 24px;
}

h4 {  
   font-size : 20px;
}

h5 {  
   font-size : 18px;
}

h5.italic {  
   font-style : italic;
}

h6 {  
   font-size : 16px;
}

p {
   color : #757575!important;
}

p.italic {
    font-style : italic;
}

@media (min-width : 993px) {  
   .hide-large {  
      display : none!important;
   }
}

@media (max-width : 992px) and (min-width : 601px) {  
   .hide-medium {  
      display : none!important;
   }
}

@media (max-width:600px){  
   .hide-small {  
      display:none!important;
   } .content-main {  
      flex-direction: row;
   }
}

@media (min-width:601px){  
   .quarter {  
      width : 24.99999%;
   } .third {  
      width : 33.33333%;
   } .twothird {  
      width : 66.66666%;
   }
}

@media (max-width:992px){  
   .content-main {  
      margin-left : 0!important;
      margin-right : 0!important;
   }
}

img {  
   border-style : none;
}

.theme {
   color : #fff!important;
   background-color : #000000!important;
}

.theme-l1 {
   color : #fff!important;
   background-color : #333333!important;
}

.top,.bottom {  
   position : fixed;
   width : 100%;
   z-index : 1;
}

.top {  
   top : 0;
}

.bottom {  
   bottom : 0;
}

.bar {  
   width : 100%;
   overflow : hidden;
}

.container, .panel {  
   padding : 0.01em 16px;
   min-height: 50px;
   overflow: hidden;
}

.panel {  
   margin-top : 16px;
   margin-bottom : 16px;
}

.bar .bar-item {  
   padding : 8px 16px;
   float : left;
   width : auto;
   border : none;
   outline : none;
   display : block;
}

.bar .button {  
   white-space : normal;
}

.bar-block .bar-item{  
   width : 100%;
   display : block;
   padding : 8px 16px;
   text-align : left;
   border : none;
   outline : none;
   white-space : normal;
   float : none;
}

.button {  
   -webkit-touch-callout : none;
   -webkit-user-select : none;
   -khtml-user-select : none;
   -moz-user-select : none;
   -ms-user-select : none;
   user-select : none;  
   border : none;
   display : inline-block;
   outline : 0;
   padding : 8px 16px;
   vertical-align : middle;
   overflow : hidden;
   text-decoration : none;
   color : inherit;
   background-color : inherit;
   text-align : center;
   cursor : pointer;
   white-space : nowrap;
}

.button : hover {  
   color : #000!important;
   background-color : #ccc!important;
}

.button : disabled{  
   cursor : not-allowed;
   opacity : 0.3;
}

.teal {  
   color : #fff!important;
   background-color : #009688!important;
}

.teal, .hover-teal : hover {  
   color : #fff!important;
   background-color : #009688!important;
}

.white, .hover-white : hover {  
   color : #000!important;
   background-color : #fff!important;
}

.margin-top {  
   margin-top : 16px!important;
}

.margin-bottom {  
   margin-bottom : 16px!important;
}

.margin-left {  
   margin-left : 16px!important;
}

.margin-right {  
   margin-right : 16px!important;
}

.right {  
   float : right!important;
}

.display-container {  
   position : relative;
}

.animate-opacity {  
   animation : opac 0.8s;
} @keyframes opac {  
   from {  
      opacity : 0;
   } to {  
      opacity : 1;
   }
}

.xlarge {  
   font-size : 24px!important;
}

.xxlarge{  
   font-size : 36px!important;
}

.left-align {  
   text-align : left!important;
}

.center {  
   text-align : center!important;
}

.padding-65 {  
   padding-top : 65px!important;
   padding-bottom : 65px!important;
}

.padding-64 {  
   padding-top : 64px!important;
   padding-bottom : 64px!important;
}

.light-grey, .hover-light-grey : hover {  
   color : #000!important;
   background-color : #f1f1f1!important;
}

.bottombar {  
   border-bottom : 6px solid #ccc!important;
}

.topbar {  
   border-top : 6px solid #ccc!important;
}

.padding-16 {  
   padding-top : 16px!important;
   padding-bottom : 16px!important;
}

.padding {  
   padding : 8px 16px!important;
}
.quarter, .third,
.twothird {  
   float : left;
   width : 100%;
}

.quarter {  
   width : 24.99999%;
}

.third {  
   width : 33.33333%;
}

.twothird {  
   width : 66.66666%;
}

.row-padding,
.row-padding > .quarter,
.row-padding > .third,
.row-padding > .twothird {  
   padding : 0 8px;
}

.content{  
   max-width : 980px;
   margin : auto;
}

.hide{  
   display : none!important;
}

.show {  
   display : block!important;
}

.container : after, .container : before,
.panel : after, .panel : before,
.row-padding : after, .row-padding : before,
.bar : before, .bar : after {  
   content : "";
   display : table;
   clear : both;
}

.circle {  
   border-radius : 50%;
}

.content-main {
   max-width : 1020px;
   margin : auto;
   min-height: 50px;
   overflow: hidden;
}

.leftbar {  
   border-left : 6px solid #ccc!important;
}

.serif {  
   font-family : serif;
}

.karma {
   font-family :"Karma", sans-serif;
}

<div class="container row-padding padding-64" id="about">
		<div class="content">
			<div class="twothird">
			<h1 class="xlarge bottombar padding-16">About</h1>	
			<h5 class="padding-32">Between art and craft, lies The Chino A Serie.</h5>

		    <p class="padding-32">Discover brand new wave of chinoserie inside us, whether you just want an instagenic background for your dayout or appreciate a new beauty, history and art while you sip your Macadamia Coffee or chop the Feast Roasta Lamb. We present you "turn-back time" experience through walking corridor gallery with theme from contemporer to ancient baroque style. Oh, once more! Check out the fusion tile work in the floor of the cafe.</p>

		    <h5 class="padding-32 italic">Entre art et artisanat, se trouve La  Chino A Série.</h5>
		    
		    <p class="padding-32 italic">Découvrez la toute nouvelle vague de chinoserie en nous, que vous souhaitiez simplement un arrière-plan instagène pour votre journée ou apprécier une nouvelle beauté, histoire et art pendant que vous sirotez votre Macadamia Coffee ou que vous coupez l'agneau Roasta Feast. Nous vous présentons l'expérience du temps de retour à travers la galerie de couloir à pied avec le thème du style contemporain à l'ancien style baroque. Oh, encore une fois! Découvrez le travail de carreaux de fusion dans le plancher du café.</p><br>
			</div><br><br>
			<div class="third center content padding-64">
				<img src="images/TealBird.jpg" alt="chinoiserie" style="width : 90%">
				<div class="panel">
					<p><i class="fa fa-quote-left xxlarge"></i><br>
						<i class="xlarge serif">White becomes teal, Birds free from the tale.
						</i><br>
						<i class="fa fa-quote-right xxlarge"></i>
					</p>
				</div>
			</div>
    	</div>
	</div>

Answer 1

You can add clear: both to .thirdcss class where max-width:600px

The clear property specifies on which sides of an element floating elements are not allowed to float

I suggest to redesign the html structure (it seems too complexe) or use a framework like bootstrap if you can.

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  min-height: 100%;
  min-width: 100%;
}

html,
body {
  font-family: Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

body {
  margin: 0;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  color: inherit;
}

a: active,
a: hover {
  outline-width: 0;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h5.italic {
  font-style: italic;
}

h6 {
  font-size: 16px;
}

p {
  color: #757575!important;
}

p.italic {
  font-style: italic;
}

@media (min-width: 993px) {
  .hide-large {
    display: none!important;
  }
}

@media (max-width: 992px) and (min-width: 601px) {
  .hide-medium {
    display: none!important;
  }
}

@media (max-width:600px) {
  .hide-small {
    display: none!important;
  }
  .content-main {
    flex-direction: row;
  }
  .third {
    clear: both;
  }
}

@media (min-width:601px) {
  .quarter {
    width: 24.99999%;
  }
  .third {
    width: 33.33333%;
  }
  .twothird {
    width: 66.66666%;
  }
}

@media (max-width:992px) {
  .content-main {
    margin-left: 0!important;
    margin-right: 0!important;
  }
}

img {
  border-style: none;
}

.theme {
  color: #fff!important;
  background-color: #000000!important;
}

.theme-l1 {
  color: #fff!important;
  background-color: #333333!important;
}

.top,
.bottom {
  position: fixed;
  width: 100%;
  z-index: 1;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

.bar {
  width: 100%;
  overflow: hidden;
}

.container,
.panel {
  padding: 0.01em 16px;
  min-height: 50px;
  overflow: hidden;
}

.panel {
  margin-top: 16px;
  margin-bottom: 16px;
}

.bar .bar-item {
  padding: 8px 16px;
  float: left;
  width: auto;
  border: none;
  outline: none;
  display: block;
}

.bar .button {
  white-space: normal;
}

.bar-block .bar-item {
  width: 100%;
  display: block;
  padding: 8px 16px;
  text-align: left;
  border: none;
  outline: none;
  white-space: normal;
  float: none;
}

.button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
  display: inline-block;
  outline: 0;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.button: hover {
  color: #000!important;
  background-color: #ccc!important;
}

.button: disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.teal {
  color: #fff!important;
  background-color: #009688!important;
}

.teal,
.hover-teal: hover {
  color: #fff!important;
  background-color: #009688!important;
}

.white,
.hover-white: hover {
  color: #000!important;
  background-color: #fff!important;
}

.margin-top {
  margin-top: 16px!important;
}

.margin-bottom {
  margin-bottom: 16px!important;
}

.margin-left {
  margin-left: 16px!important;
}

.margin-right {
  margin-right: 16px!important;
}

.right {
  float: right!important;
}

.display-container {
  position: relative;
}

.animate-opacity {
  animation: opac 0.8s;
}

@keyframes opac {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.xlarge {
  font-size: 24px!important;
}

.xxlarge {
  font-size: 36px!important;
}

.left-align {
  text-align: left!important;
}

.center {
  text-align: center!important;
}

.padding-65 {
  padding-top: 65px!important;
  padding-bottom: 65px!important;
}

.padding-64 {
  padding-top: 64px!important;
  padding-bottom: 64px!important;
}

.light-grey,
.hover-light-grey: hover {
  color: #000!important;
  background-color: #f1f1f1!important;
}

.bottombar {
  border-bottom: 6px solid #ccc!important;
}

.topbar {
  border-top: 6px solid #ccc!important;
}

.padding-16 {
  padding-top: 16px!important;
  padding-bottom: 16px!important;
}

.padding {
  padding: 8px 16px!important;
}

.quarter,
.third,
.twothird {
  float: left;
  width: 100%;
}

.quarter {
  width: 24.99999%;
}

.third {
  width: 33.33333%;
}

.twothird {
  width: 66.66666%;
}

.row-padding,
.row-padding>.quarter,
.row-padding>.third,
.row-padding>.twothird {
  padding: 0 8px;
}

.content {
  max-width: 980px;
  margin: auto;
}

.hide {
  display: none!important;
}

.show {
  display: block!important;
}

.container: after,
.container: before,
.panel: after,
.panel: before,
.row-padding: after,
.row-padding: before,
.bar: before,
.bar: after {
  content: "";
  display: table;
  clear: both;
}

.circle {
  border-radius: 50%;
}

.content-main {
  max-width: 1020px;
  margin: auto;
  min-height: 50px;
  overflow: hidden;
}

.leftbar {
  border-left: 6px solid #ccc!important;
}

.serif {
  font-family: serif;
}

.karma {
  font-family: "Karma", sans-serif;
}

<div class="container row-padding padding-64" id="about">
  <div class="content">
    <div class="twothird">
      <h1 class="xlarge bottombar padding-16">About</h1>
      <h5 class="padding-32">Between art and craft, lies The Chino A Serie.</h5>

      <p class="padding-32">Discover brand new wave of chinoserie inside us, whether you just want an instagenic background for your dayout or appreciate a new beauty, history and art while you sip your Macadamia Coffee or chop the Feast Roasta Lamb. We present you "turn-back
        time" experience through walking corridor gallery with theme from contemporer to ancient baroque style. Oh, once more! Check out the fusion tile work in the floor of the cafe.</p>

      <h5 class="padding-32 italic">Entre art et artisanat, se trouve La Chino A Série.</h5>

      <p class="padding-32 italic">Découvrez la toute nouvelle vague de chinoserie en nous, que vous souhaitiez simplement un arrière-plan instagène pour votre journée ou apprécier une nouvelle beauté, histoire et art pendant que vous sirotez votre Macadamia Coffee ou que vous coupez
        l'agneau Roasta Feast. Nous vous présentons l'expérience du temps de retour à travers la galerie de couloir à pied avec le thème du style contemporain à l'ancien style baroque. Oh, encore une fois! Découvrez le travail de carreaux de fusion dans
        le plancher du café.</p><br>
    </div><br><br>
    <div class="third center content padding-64">
      <img src="images/TealBird.jpg" alt="chinoiserie" style="width : 90%">
      <div class="panel">
        <p><i class="fa fa-quote-left xxlarge"></i><br>
          <i class="xlarge serif">White becomes teal, Birds free from the tale.
						</i><br>
          <i class="fa fa-quote-right xxlarge"></i>
        </p>
      </div>
    </div>
  </div>
</div>

Answer 2

Your media queries seems good, in max-width:600px I add a clear:both for third class:

@media (max-width:600px){  
   .hide-small {  
      display:none!important;
   } .content-main {  
      flex-direction: row;
   }
  .third {
    clear: both
  }
}

Answer 3

Because the default width is 100% and the twothird has width of 66.66%, while third has a width of 33.33%. The elements will fill up the empty spaces. What you could do is to set parent width to 66.66% or you give all three child elements a width of 100% (so it will automatically pushed everything beneath each other).