인터넷 창 줄였을때 반응형 하는 방법에 대해서.

안녕하세요 css 독학한지 2주 차 인데요

열심히 이래 저래 만들어서 혼자서 홈페이지 내

상세페이지를 만들어 봤는데..

pc 버젼에서 아래 보이는 화면 처럼 보이는데

만약 화면 창을 줄였을때

제가 원하는 위치에 div 정렬이 되게 css 수정을 하려 하는데

도통 모르겠습니다.

고수님들의 가르침 부탁드리겠습니다.

<!-- html 시작 -->

<div id="salesengineer">

<div class="salesengineer_img">
<img src="/img/salesengineer/business_1.jpg" width="333px" height="297px">
</div>

<div class="salesengineer_text">
설계, 엔지니어링 및 건설
</div>

<div class="salesengineer_line_top">
</div>

<div class="salesengineer_text2">
건축사, 건설회사, 엔지니어링 고나련 회사, 플랜트 관련 회사 등 고품질의 대형크기(A3~A0)의 선과 이미지를 포함한 도면과 사실적, 고품질의 이미지(조감도, 프레젠테이션)를 낮은 운영 비용으로 빠르고 편리하게 인쇄할 수 있습니다.
</div>

<div class="salesengineer_line_foot">
</div>

<div class="salesengineer_text3">
주요 적용 분야
</div>

<div class="salesengineer_text4">
<li>설계스튜디오</li>
<li>공공사업 부서</li>
<li>지형 스튜디오</li>
<li>자산관리/부동산 대행업체</li>
<li>MEP(기계, 전기, 배관, 엔지니어링 팀)</li>
<li>건설-일반계약부서 및 무역 하청업체 및 공급업체</li>
</div>

</div>

<!-- html 끝 -->

<!-- css 시작 -->

 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

#salesengineer {
  width:800px;
  /* margin:0 auto; 중앙 정렬을 하려면 사용 해야 하는 코드*/
}

.salesengineer_img {
  width:333px;
  height:297px;
  margin: 11px 30px 0px 11px;               /*  윗쪽 여백을 3픽셀주고 왼쪽 여백 284px */
 
  box-shadow:2px 2px 5px black;
  float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */

  /* clear:both; 묶음을 풀어 버린다 */
}

.salesengineer_text {
  width:410px;
  height: auto;
  font-size:24px;
  font-weight:700;
  color:#3186c9;
  font-family: "Noto Sans KR", sans-serif;
  text-align: left;
  padding:10px 0px 10px 0px;            /* div 박스 내 여백 지정 위 오른쪽 아래 왼쪽 */
  float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */
}

.salesengineer_line_top {
  width:410px;
  height:1px;
  background: #000000;
  margin: 0px 0px 10px 0px;               /*  윗쪽 여백을 3픽셀주고 왼쪽 여백 284px */
  float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */
}

.salesengineer_text2 {
  width:410px;
  height: auto;
  font-size:16px;
  font-weight:700;
  color:#444444;
  font-family: "Noto Sans KR", sans-serif;
text-align: left;
  float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */
}

.salesengineer_line_foot {
  width:410px;
  height:1px;
  background: #000000;
  margin: 10px 0px 0px 0px;               /*  윗쪽 여백을 3픽셀주고 왼쪽 여백 284px */
  float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */
}

.salesengineer_text3 {
  width:410px;
  height: auto;
  font-size:18px;
  font-weight:700;
  color:#ff7e00;
   font-family: "Noto Sans KR", sans-serif;
  text-align: left;
  padding:20px 0px 10px 0px;            /* div 박스 내 여백 지정 위 오른쪽 아래 왼쪽 */
  float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */
}

.salesengineer_text4 {
  width:410px;
  height: auto;
  padding:0px 0px 0px 16px;            /* div 박스 내 여백 지정 위 오른쪽 아래 왼쪽 */
  font-size:16px;   /* 폰트 크기 */
  font-weight:800; /* 폰트 두께 */
  line-height:28px; /* 행간 높이 */
  list-style-type:disc; /* 폰트 옆 특수 문자 disc 속이 꽉찬 검은색, circle 속이 비이었는 원, square 속이 꽉찬 검은색 사각 */
  color:#444444;
  font-family: "Noto Sans KR", sans-serif;
  text-align: left;
  float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */
}

<!-- css  끝 -->