I am currently making an app. I would like the time to be directly above the footer instead of below the google translator. Is there anyway to do this? I have attached a picture at the end to show how it is looking like right now. 

```
<!-- codes that not related-->

    <div id="demo"></div> <!-- TIME -->

<footer data-role="footer" class="ui-footer-fixed">
    <h4>Copyright 2017</h4>
</footer>

```

I have added in the css as requested below. 

```
.ui-header,
.ui-footer {
border-width: 1px 0;
border-style: solid;
position: relative;
}

.ui-header:empty,
.ui-footer:empty {
min-height: 2.6875em;
}

.ui-header .ui-title,
.ui-footer .ui-title {
font-size: 1em;
min-height: 1.1em;
text-align: center;
display: block;
margin: 0 30%;
padding: .7em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: 0 !important;
}

.ui-footer .ui-title {
margin: 0 1em;
}
.ui-content {
border-width: 0;
overflow: visible;
overflow-x: hidden;
padding: 1em;
}

/* Corner styling for dialogs and popups */
.ui-corner-all > .ui-header:first-child,
.ui-corner-all > .ui-content:first-child,
.ui-corner-all > .ui-footer:first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}

.ui-corner-all > .ui-header:last-child,
.ui-corner-all > .ui-content:last-child,
.ui-corner-all > .ui-footer:last-child {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}

```

![](https://i.imgur.com/x6i29uL.png)