Testing

HTML

<div class="outer-container">
  <div class="inner-container">
    <div class="publisher"></div>
    <div class="subscriber"></div>
    <div class="screen"></div>
  </div>
  <div class="bottom">
    
    <button type="button" id="btn">
      Share screen
    </button>
  </div>
</div>

CSS

.outer-container {
  height: 100vh;
  background: yellow;
  display: flex;
  flex-direction: column;
}

.inner-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.publisher {
  width: 10rem;
  height: 10rem;
  background: red;
  margin: .5rem;
}

.subscriber {
  background: blue;
  margin: .5rem;
  flex: 0 1 100%;
}

.subscriber.share {
  width: 10rem;
  height: 10rem;
  flex: none;
}

.screen {
  background: pink;
  flex: 0 1 100%;
  display: none;
}

.bottom {
  width: 100%;
  height: 6rem;
  background: green;
}

JavaScript

$(document).ready(function($) {

	
  $('#btn').on('click', function() {
  
  	$('.subscriber').addClass('share')
  	$('.screen').show()
  });
  

});