how to create a responsive footer in material? - css

Question

I am trying to develop a page footer in angular 6. I am using angular material and not using bootstrap.
Can anyone help to change this code into the angular material syntax?
I want to convert this footer into the full responsive Material UI design.
If possible then can I make this footer as responsive as well?
.app-footer {
margin-top: 2em;
text-align: center;
vertical-align:middle;
min-height: 100%
}
.app-footer-link {
line-height: 1.5em;
}
.app-footer-link p {
margin: 0;
}
.row/*:after*/ {
display: flex;
/*content: "";
display: table;
clear: both;*/
}
.firstrow/*:after*/ {
display: flex;
/*content: "";
display: table;
clear: both;*/
padding-top: 20px;
}
.column {
flex: 25%;
/*width:20%;*/
float:left;
font-size:12px;
}
.headingcolumn {
flex: 25%;
/*width:20%;*/
float:left;
font-size:18px;
/*line-height:12px;*/
}
.maincolumnleft {
flex: 50%;
/*width: 50%;*/
float: left;
}
.maincolumnright {
/*flex: 50%;*/
width: 50%;
float: right;
}
.fullcolumn {
width: 100%;
/*flex:100%;*/
font-size: 12px;
text-align: center;
vertical-align: middle;
}
.heading{
font-size:18px;
}
#media screen and (max-width: 600px) {
.column {
/*flex:100%;*/
width: 100%;
}
.headingcolumn {
/*flex: 100%;*/
width: 100%;
}
.maincolumnleft {
/*flex: 100%;*/
width: 100%;
}
.maincolumnright {
/*flex: 100%;*/
width: 100%;
}
}
------------footer.component.html---------------------------
<footer class="app-footer">
<div class="app-footer-link">
<div class="firstrow">
<div class="headingcolumn"></div>
<div class="headingcolumn">B</div>
<div class="headingcolumn">S</div>
<div class="headingcolumn">About Us</div>
<div class="headingcolumn">C Service</div>
</div>
<div class="row">
<div class="column"></div>
<div class="column">New Acc</div>
<div class="column">New Acc</div>
<div class="column">About</div>
<div class="column">Help</div>
</div>
<div class="row">
<div class="column"></div>
<div class="column">Cat</div>
<div class="column">St</div>
<div class="column">Sit</div>
<div class="column">Contact Us</div>
</div>
<div class="row">
<div class="fullcolumn">
<span class="heading">Follow:</span>
</div>
</div>
<div class="row">
<div class="fullcolumn">
Copyright © {{getYear()}}
</div>
</div>
</div>
</footer>

Answer 1

Updated
footer{
background: tomato;
display: flex;
flex-direction: column;
flex-wrap: wrap; /*flex items will wrap onto multiple lines, from top to bottom.*/
padding: 20px;
}
.section-top{
background: yellow;
display: flex;
justify-content: center; /*items are centered along the line*/
padding: 20px 0;
}
.section-bottom{
background: blue;
text-align: center;
padding: 15px 0;
}
.col{
margin: 0 15px;
width: 25% /*optional*/
}
#media all and (max-width: 600px){ /*style if screen size is <600px*/
.section-top{
flex-direction: column;
}
.col{
text-align: center;
width: 100%;
margin: 0
}
}
<footer>
<section class="section-top">
<div class="col">
<h3>Title</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Line 3</div>
</div>
<div class="col">
<h3>Title</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Line 3</div>
</div>
<div class="col">
<h3>Title</h3>
<div>Line 2</div>
<div>Line 3</div>
</div>
<div class="col">
<h3>Title</h3>
<div>Line 2</div>
</div>
</section>
<section class="section-bottom">
<div>Follow</div>
<div>Copy right</div>
</section>
</footer>