Edit on
<div class="container">
  
  <div class="expanded_container">
    <div></div>
  </div>
  
  <div class="items_container">

    <div class="color_brown item" data-color="brown"></div>
    <div class="color_magenta item" data-color="magenta"></div>
    <div class="color_red item" data-color="red"></div>
    <div class="color_green item" data-color="green"></div>
    <div class="color_skyblue item" data-color="skyblue"></div>
    <div class="color_orange item" data-color="orange"></div>
    <div class="color_yellow item" data-color="yellow"></div>
    <div class="color_blue item" data-color="blue"></div>
    <div class="color_rr item" data-color="rr"></div>
    <div class="color_ut item" data-color="ut"></div>

  </div>
  
</div>
$color_brown: #90492C;
$color_magenta: #D50C8C;
$color_red: #EE3123;
$color_green: #1FB25A;
$color_skyblue: #72CDF4;
$color_orange: #F68E1E;
$color_yellow: #FFF202;
$color_blue: #007cc2;
$color_rr: #222;
$color_ut: #777;

$color_names: 
  color_brown
  color_magenta
  color_red
  color_green
  color_skyblue
  color_orange
  color_yellow
  color_blue
  color_rr
  color_ut;

$color_vars: 
  $color_brown
  $color_magenta
  $color_red
  $color_green
  $color_skyblue
  $color_orange
  $color_yellow
  $color_blue
  $color_rr
  $color_ut;

div {
  box-sizing: border-box;
  position: relative;
}

.container {
  width: 90%;
  min-width: 320px;
  margin: auto;
}


.expanded_container,
.items_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: space-around;
}

.expanded_container {
  padding:.6em;
}

.expanded_container div{

}

.item_expanded {
  width: 100%;
  height: 300px;
  transition: all 1s ease;
}

.item {
  width: 32%;
  height: 150px;
  margin: .15em;
}

@each $name in $color_names {
  $i: index($color_names, $name);
  .#{$name} {
    background: nth($color_vars, $i);
  }
}

@media (max-width: 800px) {
  
  .expanded_container {
  padding:.15em;
}
  
  [class^="color"] {
    width: 49%;
  }
  
  
}



@media (max-width: 560px) {
  
  .expanded_container {
    padding:0em;
  }
  
  [class^="color"] {
    width: 100%;
  }
  
  
}
View Compiled
// For any item that's clicked

$('.item').each( function(){

  $(this).click(
    
    function(){
      
      // First, make sure all of the items are showing and make sure no items are expanded
      
      $('.expanded_container').find('div').removeClass();
      $('.item').show("slow", "linear");
    
    // Create a new div using the class of the clicked item
      
      var itemToMove = $(this).attr('class');
      var expandedItem = $('.expanded_container').find('div').addClass(itemToMove + ' item_expanded').removeClass('item');
      
    // Hide the clicked item and add the new div to the expanded area
      
      $(this).hide("fast", "linear");
      /*$('.expanded_container').append(expandedItem);*/
    }
  )}
);


// When the expanded item is clicked, move it back to the unselected items area

$('.expanded_container').click(function(){
  
    $('.expanded_container').find('div').removeClass();
    $('.item').show("slow", "linear");
  
});
Rerun