grid/list view product display issue

list view left/ gridview right

   <div id="container">
<div class="buttons">
    <button class="grid">Grid View</button>
    <button class="list">List View</button>
</div>

 <ul class="list_view" >
       <li>
           <div class="item1">
           <img src="images\homepage-960px_26.jpg" alt="Shoe 1"/>
           <div class="switch" > 
           <ul class="main_icons" >
           <li><i class="fa fa-eye" aria-hidden="true"></i></li>
           <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-share-square-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
           </ul>
           <p class="even_odd">Even&Odd </p>
           </div>
           </div>
      </li>
      <li>
           <div class="item2">
           <img src="images\Item 2.png" alt="Shoe 2"/>
           <p class="on_sale">ON SALE!</p>
           <div class="switch" id="switch2"> 
           <ul class="main_icons" id="main_icons2">
           <li><i class="fa fa-eye" aria-hidden="true"></i></li>
           <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-share-square-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
           </ul>
           <p class="even_odd" >Even&Odd </p>
           </div>
           </div>
      </li>
      <li>
           <div class="item3">
           <img src="images\homepage-960px_29.jpg" alt="Shoe 3"/>
           <div class="switch" id="switch7"> 
           <ul class="main_icons" id="main_icons7">
           <li><i class="fa fa-eye" aria-hidden="true"></i></li>
           <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-share-square-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
           </ul>
           <p class="even_odd">Buffalo Decolettè </p>
           </div>
           </div>
      </li>
      <li>
           <div class="item4">
           <img src="images\homepage-960px_33.jpg" alt="Shoe 4"/>
           <div class="switch" id="switch3"> 
           <ul class="main_icons" id="main_icons3">
           <li><i class="fa fa-eye" aria-hidden="true"></i></li>
           <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-share-square-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
           </ul>
           <p class="even_odd" >Even&Odd </p>
           </div>
           </div>
      </li>
      <li>
           <div class="item5">
           <img src="images\homepage-960px_34.jpg" alt="Shoe 5"/>
           <div class="switch" id="switch4"> 
           <ul class="main_icons" id="main_icons4">
           <li><i class="fa fa-eye" aria-hidden="true"></i></li>
           <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-share-square-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
           </ul>
           <p class="even_odd" >Even&Odd </p>
           </div>
           </div>
      </li>
      <li>
           <div class="item6">
           <img src="images\shoe_photo3.png" alt="Shoe 6"/>
           <p class="on_sale" id="out_stock"> OUT OF<br/>&nbsp STOCK</p>
           <div class="switch" id="switch8"> 
           <ul class="main_icons" id="main_icons8">
           <li><i class="fa fa-eye" aria-hidden="true"></i></li>
           <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-share-square-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
           </ul> 
           <p class="even_odd">Buffalo Decolettè </p>
           </div>
           </div>
      </li>
      <li>
           <div class="item7">
           <img src="images\homepage-960px_26.jpg" alt="Shoe 7"/>
           <div class="switch" id="switch5"> 
           <ul class="main_icons" id="main_icons5">
           <li><i class="fa fa-eye" aria-hidden="true"></i></li>
           <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-share-square-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
           </ul>
           <p class="even_odd" >Even&Odd </p>
           </div>
           </div>
      </li>
      <li>
           <div class="item8">
           <img src="images\Item 2.png" alt="Shoe 8"/>
           <p class="on_sale" id="on_sale2"> ON SALE!</p>
           <div class="switch" id="switch6"> 
           <ul class="main_icons" id="main_icons6">
           <li><i class="fa fa-eye" aria-hidden="true"></i></li>
           <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-share-square-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
           </ul>
           <p class="even_odd" >Even&Odd </p>
           </div>
           </div>
      </li>
      <li>
           <div class="item9">
           <img src="images\homepage-960px_29.jpg" alt="Shoe 3"/>
           <div class="switch" id="switch9"> 
           <ul class="main_icons" id="main_icons9">
           <li><i class="fa fa-eye" aria-hidden="true"></i></li>
           <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-share-square-o" aria-hidden="true"></i></li>
           <li><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
           </ul>
           <p class="even_odd">Buffalo Decolettè </p>
           </div>
           </div>
      </li>
 </ul>
  </div>

.list_view{
        list-style-type:none;
        top:600px;
        position:absolute;
        left:244px;
        height:1100px;
        overflow:auto;
        width:91%;
}
.list_view li{
        margin-bottom:100px;
        padding-left:0;
}
#container ul { 
list-style-type: none; 

}
#container .buttons { 
left:850px;
position:absolute;
z-index:1000;
top:550px;
 }

#container .list li { 
width: 100%; 


 }

#container .grid li { 
float: left; 
height: 50px; 
padding-left:57px;
padding-bottom: 300px;
 }

$('button').on('click',function(e) {
    if ($(this).hasClass('grid')) {
        $('#container ul').removeClass('list').addClass('grid');
    }
    else if($(this).hasClass('list')) {
        $('#container ul').removeClass('grid').addClass('list');
    }
});

Hi.I'm trying to make a list view and a grid view to my site but I don't know how to make specific items switch positions as the images do...When I press grid view button, the images display in grid, but the badges and the text remain the same as in list mode.I made sure I had put them all in the same div..but still doesn't work.Any suggestion please ?

       Hi.I'm trying to make a list view and a grid view to my site but I don't know how to make specific items switch positions as the images do...When I press grid view button, the images display in grid, but the badges and the text remain the same as in list mode.I made sure I had put them all in the same div..but still doesn't work.Any suggestion please ?